CODEWITHSUNDEEP
javascriptreactjsreact-routerlocal-storagereact-router-dom
Rishabh
Rishabh

Reputation: 13

Render card details on another page when clicking specific card

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

Answers (1)

ravibagul91
ravibagul91

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

Related Questions