0

I'm passing an object, into a component I ReactJS.

 <Route path="/products/:id" render={(props) =>{
      return (<Book {...props} books={this.props.products}/>)
    }} />

books is an array object, where I find the one, that matches with the id given in

I can successfully log the objects bassed in 

 let books =(props.books[0]) //logs object succesfully

but when I try to access a prop I get undefined.

I tried, using a setTimeOut function, to wait a bit, where it gives the same error, but also logs to the console 

  let books =(props.books[0]) 
setTimeout(function(){
    console.log(books.id) // logs then fails
}, 100)

Here is an image of it

how can I make it stop?

Output of console.log(props.books) 

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, title: "How to Learn JavaScript - Vol 1", info: "Study hard"}
1: {id: 2, title: "How to Learn ES6", info: "Complete all exercises :-)"}
2: {id: 3, title: "How to Learn React", info: "Complete all your CA's"}
3: {id: 4, title: "Learn React", info: "Don't drink beers, until Friday (after four)"}
length: 4

Output of console.log(props.books[0])

{id: 1, title: "How to Learn JavaScript - Vol 1", info: "Study hard"}


  <Route path="/products" render={() => <Product products={this.state.books}/>} />

//here this.state.books equals [
    { id: 1,title: "How to Learn JavaScript - Vol 1", info: "Study hard"},
    { id: 2,title: "How to Learn ES6", info: "Complete all exercises :-)"},
    { id: 3,title: "How to Learn React",info: "Complete all your CA's"},
    { id: 4,title: "Learn React", info: "Don't drink beers, until Friday (after four)"
    }
  ]
Dedi
  • 2,812
  • 3
  • 22
  • 55
  • 1
    Can you share the output of `console.log(props.books)`? – Laurens Deprost Dec 30 '18 at 22:06
  • I have now edited the question – Dedi Dec 30 '18 at 22:10
  • Why are you trying to do this `console.log(books.id)` in the set timeout. You should do something like `console.log(props.books[0].id)` – Sergio Escudero Dec 30 '18 at 22:13
  • Yes but then i get The error as mentioned – Dedi Dec 30 '18 at 22:14
  • Do the 'working' console output & the error occur in the same context? – Laurens Deprost Dec 30 '18 at 22:15
  • Yes when i use the set timeOut it logs out then Fails. I suspect the loading – Dedi Dec 30 '18 at 22:16
  • 1
    Where does the book data come from and how/when is the state/props set in the root component? – Laurens Deprost Dec 30 '18 at 22:19
  • It would be great if you can share part of the code with issue here : https://codesandbox.io/s/new – Badis Merabet Dec 30 '18 at 22:26
  • What's the result of `console.log(props)` just before line : 6 ? – Badis Merabet Dec 30 '18 at 22:28
  • 1
    Most probably you are getting the related data from a remote place, so in the first render there isn't any data yet. This is why you are getting this error. `console.log` works since it [behaves weird](https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch). Search for "conditional rendering". It is hard to help you since the related part of your code is missing. – devserkan Dec 30 '18 at 22:34
  • i edited and added in the props being passed down – Dedi Dec 30 '18 at 22:40
  • As @devserkan already mentioned: You are probably getting the data from a remote place and handling that part wrong. Fetching data should be made inside the ```componentDidMount``` method and inside the render() method you should handle undefined values to render correctly. – Björn Böing Dec 30 '18 at 23:31

0 Answers0