Props.attribute is undefined - React

JavaScript
1

Hey Campers,

I was working on the Random Quote Generator using React JS and I faced this issue

when I call the api I make sure that the result is received correctly then I set the state successfuly

the problem is when I try to pass the new state to props of other children

here is codepen : https://codepen.io/HamedOKhaled/pen/dqZEQO?editors=0011

2

I would clean up your data a bit before passing it as props. I have found this saves me a lot of grief from trying to dig stuff out of a nested array/object down the road.

this.setState({
  author: result[0].author,
  category: result[0].category,
  quote: result[0].quote
});

Remove the Q when passing the props (unless you feel this is necessary, like you are going to add more to your state down the road):

<ShowQuote message={this.state.quote} />
<ShowAuthor author={this.state.author}/>

And then update the code that is rendering them to also remove the Q (unless this Q is desired):

function ShowAuthor(props) {
  return <h2>dog: {props.author}</h2>
}
function ShowQuote(props) {
  return <h1>cat: {props.quote}</h1>
}

Also, try to keep your variable names consistent.

function ShowQuote(props) {
  return <h1> {props.**message**}</h1>
}

Hope that helps!

3

Thanks @sipofwater for your help it works now but I don’t know what was the error of encapsulating the data into object Q ? may you further explain to me ?

4

@hamedomarkhaled There is no error in using the Q, I just took it out to simplify the data structure - no other reason :slight_smile:

5

@sipofwater I understand the problem now I wasn’t aware that the result returned from the API is an array of objects not single object .

6