property on prop object is sometimes null

Question

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)

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)"
    }
  ]

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
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 — Kristoffer Tølbøll, Dec 30 '18 at 22:16
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
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
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

property on prop object is sometimes null

0 Answers0