Reputation: 13
Cards are coming from a JSON file. Code is from a file called paintings.js. Cards are all rendering properly and when clicked they bring me to blank paintingInfo.js page. My question is what should I include in this new paintingInfo.js page so that it renders the card I stored inn localstorage. Relatively new to React so any help would be much appreciated.Basically how do I access local storage in the paintingInfo.js page for it to render?
state = {
cardInfo: [...cardInfo]
};
goToPaintingInfo = (cardInfo) => {
localStorage.setItem("selectedPainting", cardInfo);
this.props.history.push("/paintingInfo/:id");
}
render() {
return (
<React.Fragment>
<Navbar className="navCustom d-flex justify-space-between" bg="light" variant="light">
<Navbar.Brand href="/">SNR Arts</Navbar.Brand>
<Nav className="ml-auto navCust">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/paintings">Paintings</Nav.Link>
<Nav.Link href="/contact">Contact</Nav.Link>
</Nav>
</Navbar>
<div className="container-fluid">
<div className="row align-items-center justify-content-between">
{/* print out cards here */}
{this.state.cardInfo.map(card => {
return (
<div className="col-12 col-sm-3 col-md-2 my-3" key={card.id}>
<img
src={card.image}
alt={card.name}
className="img-fluid img-thumbnail rounded indvCard bg-dark"
onClick = {()=>this.goToPaintingInfo(card.id)}
/>
</div>
);
})}
</div>
</div>
Upvotes: 0
Views: 1496
Reputation: 20765
On click of card, instead of card.id
you need to send card
only like,
onClick = {()=>this.goToPaintingInfo(card)}
goToPaintingInfo = (cardInfo) => {
localStorage.setItem("selectedPainting", JSON.stringify(cardInfo)); //store complete card
this.props.history.push(`/paintingInfo/${cardInfo.id}`); //For this you must have Route to handle this request
}
Somewhere in Route, you must have
<Route path="/paintingInfo/:id" exact component={paintingInfo} /> //Write appropriate component name
paintingInfo.js
file
state={
card: JSON.parse(localStorage.getItem("selectedPainting"))
}
render(){
return(
<div>
<img src={this.state.card.image}
alt={this.state.card.name}
className="img-fluid img-thumbnail rounded indvCard bg-dark"
/>
</div>
)
}
Note: Instead of this.props.history.push
, you can make use of Redirect
from react-router-dom
package only.
import {Redirect} from 'react-router-dom'
goToPaintingInfo = (cardInfo) => {
localStorage.setItem("selectedPainting", cardInfo); //store complete card
return <Redirect to={`/paintingInfo/${cardInfo.id}`} />; //For this you must have Route to handle this request
}
Upvotes: 1