CODEWITHSUNDEEP
javascriptreactjs
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3347

Rendering route, from product id, while passing in props

I have a Product.js component where I render a list of products (books), 

export default class Product extends Component {
  render() {
console.log(this.props)


return (
<Router>
  <div>
    <div>
    {this.props.products.map(product =>(
    <div>
      <p>Products</p>
      <p>Id:{product.id}</p>
      <p>Title: {product.title}</p>
      <p>Info: <br/>{product.info}</p>
      <NavLink to={`/products/${product.id}`}>Details</NavLink>
      <br/>
      </div>
    ))}
    </div>

I then want to make a route, so that each product, has an attached link, to see the details of the book.

I want to make a conditional route, with the id, and then pass the values in as props 

 <Route path="/:id" render={() => <Book />}

Here I'm in doubt, what I should pass in because I no longer have access to the props from the rendered products. Could I pass it in with the link, and should I make a nested route?

Here is my book component, which should be rendered, when a link of details is clicked for a book 

export default function Book({ props}) {
  console.log(props)
    return (
    <div>
      <h1>Book details go here</h1>
      <h3></h3>
    </div>
  )
}

EDIT:

i tried accesing the props like suggested

export default function Book(props) {
  console.log(props.match.id)
    return (
    <div>
      <h1>Book details go here</h1>
      <h3></h3>
    </div>
  )
}

Upvotes: 2

Views: 679

Answers (1)

ic3b3rg
ic3b3rg

Reputation: 14927

The id should be accessible from the match prop that React Router sends down to the route component, i.e.

const id = this.props.match.params.id;

Also, your route should be

<Route path="/:id" component={Book} >

instead of 

<Route path="/:id" render={() => <Book />} />

Upvotes: 2

Related Questions