GOAL: When I click the back button in the browser, I want the previous page to load.
Currently, when I click the back button in my ProductDetailsPage.js file, my app reverts to localhost:3000 without a forward slash.
How can I ensure when I click the back button in the browser that my app will load localhost:3000/ with a forward /
Here is the code for the page I'm clicking back from:
const addToBasket = () => {
// dispatch item into data layer
dispatch({
type: "ADD_TO_BASKET",
item: {
name: product.name,
brand: product.brand,
image: product.image,
price: product.price,
},
});
};
return (
<div>
<img src={product.image} />
<h3>{product.brand}</h3>
<h1>{product.name}</h1>
<p>${product.price}</p>
<button onClick={addToBasket}>Add to Cart</button>
</div>
);
}
My app should revert to the page Feed.js with following code:
return (
<div className="feed">
<div className="feed__cards">
{products.map((product) => (
<ProductCard
image={product.image}
brand={product.brand}
name={product.name}
price={product.price}
id={product.id}
/>
))}
</div>
</div>
);
}
Any help would be appreciated.
Look likes it's working now. I reset my server and worked like a charm.
Related
I am using react slick for making slides of poll. I am facing issue while clicking the poll option. Click gets fired after two clicks.
I think touch start is the issue here.
Not sure if it's like your code but the console logs the text when I click on the first image:
const ReactSlick = (props) => {
var settings = {
dots: true
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img onClick={() => console.log("Clicked !")} src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
```;
I'm trying to make a preview for a pdf file for items in my database that have a pdf file attached to them. Right now, I'm trying to use React's pdf module but can't seem to get it to work. I'm unsure why it's working and would like to know how to make it work right now. What I want is when you click the button Preview, I want it to go to open up a separate page with the pdf there. My end goal is to have a mini viewer, so once you click the button, a mini viewer that takes up roughly 1/3 of the screen pops up in the middle where you can scroll and view the pdf.
I would appreciate it if I could have some help in terms of reaching these goals of mine.
Here's my code:
import "../styles/ProjectDetails.css";
import React, { useState } from 'react'
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
function PdfViewer() {
const [numPage, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({numPages}) {
setNumPages(numPage);
setPageNumber(1);
}
return (
<div>
<header>
<Document file="../pdfs/Mini_Case_Study_15.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page height="600" pageNumber={pageNumber}></Page>
</Document>
</header>
</div>
)
}
const ProjectDetails = ({ project }) => {
return (
<div className="card-grid">
<div className="card">
<div className="card-header card-image">
<img src="https://c4.wallpaperflare.com/wallpaper/672/357/220/road-background-color-hd-wallpaper-thumb.jpg"/>
</div>
<div className="card-title"><strong>{project.sdg}</strong></div>
<div className="card-body">
<strong>Goal:</strong> {project.goal}
</div>
<div className="card-themes">
<strong>Themes:</strong> {project.theme.map((theme)=>{return theme + ', '})}
</div>
<div className="card-assignment">
<strong>Assignment Type:</strong> {project.assignment_type}
</div>
<div className="card-footer">
<button className="btn">Details</button>
{project.assignment_type === 'Mini Case Studies' &&
<>
<button className="btn btn-outline">Download</button>
<button onClick={PdfViewer} className="btn">Preview</button>
</>
}
{project.assignment_type !== 'Mini Case Studies' &&
<button className="btn btn-outline" onClick={function(event){ navigator.clipboard.writeText(project.goal); alert('Text copied to clipboard!') }}
>
Copy to Clipboard
</button>
}
</div>
</div>
</div>
)
}
export default ProjectDetails
I am using React.js and firebase. I am fetching an image from firebase and trying to render it in a component.
When the image URL is available, I setState the URL, but the image still does not show.
componentDidMount(){
const that = this;
firebase
.storage()
.ref("hero1.png")
.getDownloadURL()
.then(url => {
console.log(url);
that.setState({url})
})
.catch(error => {
// Handle any errors
});
}
// rendering the image
...
{ this.state.url &&
this.state.slides.map((slide, index) => {
console.log(slide.imageUrl); // url is being printed here
return (
<div
key={index}
onDragStart={this.handleOnDragStart}
className="slider-wrapper"
>
<div key={index} className="slider-content">
<img src={this.state.url} /> // when I set a hard-coded url, it works, but
//does not work in state
</div>
</div>
);
})}
...
One more thing, when I resize the browser, the image shows up immediately. Don't know why
Try this one, I removed key from the child div and updated the other key to slide.imageUrl:
{ this.state.url &&
this.state.slides.map((slide, index) => {
console.log(slide.imageUrl); // url is being printed here
return (
<div
key={slide.imageUrl}
onDragStart={this.handleOnDragStart}
className="slider-wrapper"
>
<div className="slider-content">
<img src={this.state.url} /> // when I set a hard-coded url, it works, but
//does not work in state
</div>
</div>
);
})}
I was using a library (react-alice-carousel) to render the slides of images. This was causing problem. Just switched the library to react-animated-slider, and it worked.
Thanks, everybody for helping me and for your time.
Preconditions: React application using appbaseio/reactivesearch
Problem: I am trying to open a simple detail page in the same window (e.g. as a popup window triggered via onclick handler) when I click on a search result. Search results are being displayed by the ResultCard component. Anybody had a similar issue and solved it?
I see there is the url parameter (here: "profile") in the ResultCard component, but it just redirects to the specified url in another tab window.
import {ReactiveBase, DataSearch, ResultCard} from
appbaseio/reactivesearch";
// ...some more code
<div className="container">
// connector to appbase.io
<ReactiveBase
app="myapp"
credentials="xxx"
theme={{
primaryColor: "#ffe067"
}}
>
// search bar
<DataSearch
componentId="SearchSensor"
dataField={["gebot_name", "info"]}
className="search"
/>
// display search results in a list with title and description
<ResultCard
className="right-col"
componentId="SearchResult"
size={10}
onData={data => ({
title: data.gebot_name,
description: data.description,
url: "profile"
})}
react={{
and: ["SearchSensor"]
}}
/>
</ReactiveBase>
</div>
So to what I understand from your question you want to display a Modal when clicking on result item and show all the details.
If this is the case you can use ReactiveList and render the data according to your choice. For eg:
In v2:
<ReactiveList
...
onData={ res => (
<div onClick={() => this.handleModal(res)} >{Content}</div>
)
}
/>
With this.handleModal you can handle the Modal and display the data.
In v3
<ReactiveList
...
renderItem={ res => (
<div onClick={() => this.handleModal(res)} >{Content}</div>
)
}
/>
Check documentation here:
For v3: https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html
For v2: https://opensource.appbase.io/reactive-manual/v2/result-components/reactivelist.html
I have an object in an external file and I want to pass the url into the button onClick but I do not know to pass the value.
Object:
const ProjectLists = [
{
id: "4",
iconImage: "",
name: "Simple",
description: "Simple is a corporate responsive template and the absolutely clean & modern template theme for your business. The theme was built by Foundation Framework and take advantages of it features: grid system, typography, buttons, form, UI element, section and more.",
technologies: "HTML, CSS, JavaScript",
href: "http://striped-dolls.surge.sh"
}
]
export default ProjectLists;
How to pass ProjectLists.map((project, i) => href in map() into <button>
class Projects extends Component {
render() {
return (
<div>
{ProjectLists.map((project, i) =>
<section className='section'>
<div className='row'>
<div className='col-sm'>
<div className='content-left'>
<p key={project.id + i}>
{project.iconImage}
</p>
</div>
</div>
<div className='col-sm-8'>
<div className='content-right text-left'>
<h1>{project.name}</h1>
<p>{project.description}</p>
<p>Technologies: {project.technologies}</p>
<button type='submit' onClick=() => </button>>View live</button>
</div>
</div>
</div>
</section>
)}
</div>
)
}
}
Thank you for your help!
You can pass extra data in your map using arrow functions:
{ProjectLists.map(project =>
<button onClick={onProjectClick(project)}>View live</button>
}
// e.g.
onProjectClick = project => event => {
console.log(project.description);
navigateTo(project.href);
}
I noticed your button has type="submit" so more the correct event to handle is onSubmit on the form element however as this handles pressing the Return key for example (it's not essential though).
You can use "a" tag for this purpose.
<a href={project.href}></a>
If you want to use onClick in your button, then you can try this.
onClick={() => { window.location.href = project.href }}
state = {
redirect: false
}
setRedirect = (href) => {
window.location.href = href;
}
Call the setRedirect function
<button onClick={()=>this.setRedirect(project.href)}>View live</button>