Props.attribute is undefined - React

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 :

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.

  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={}/>

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: {}</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!

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 ?

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

@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 .