React Props Can't access Object

1

I receive an array of objects as props within the Quote component I can access the props find but when I try to go deeper to the Object it said Cannot read property ‘id’ of undefined I have tried multiple things but can’t find out what’s wrong

const arrOfQuotes = [
  { 
      id: 0,
      author: "Paulette Henry",
      body: "God is my Faith and Path that lay foundation upon my Life"
  },
  { 
      id: 1,
      author: "Adrian Anderson",
      body: "Today is yours tomorrow is mine"
  }, 
  { 
    id: 2,
    author: "Nassim Nicholas Taleb",
    body: "The inability to predict outliers implies the inability to predict the course of history, given the share of these events in the dynamics of events."
  },
  { 
    id: 3,
    author: "Brian Lonsdorf",
    body: "A spot of code is referentially transparent when it can be substituted for its evaluated value without changing the behavior of the program."
  },
   { 
    id: 4,
    author: "George Bernard Shaw",
    body: "Custom will reconcile people to any atrocity, and fashion will drive them to acquire any custom."
  }, 
  { 
    id: 5,
    author: "Kim Eric Drexler",
    body: "TRibosomes are proof that nanomachines built of protein and RNA can be programmed to build complex molecules."
  }, 
  { 
    id: 6,
    author: "Doug Stanhope",
    body: "Life is like animal porn: it's not for everyone."
  },
  { 
    id: 7,
    author: "Mark Weiser",
    body: "The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it."
  },
  { 
    id: 8,
    author: "Jeff Atwood",
    body: "If you know (or even suspect!) your database was exposed, the very first thing you should do is reset everyone's password."
  },
  { 
    id: 9,
    author: "Brian Tomasik",
    body: "We can interpret any piece of matter as being conscious if we want to, but in many cases it doesn't make sense to most of us to speak that way. Panpsychism is analogous to 'pantableism' -- the view that tableness is intrinsic to all matter. There is some sense in which you can interpret any piece of matter as being a table. After all, for any (solid) clump of atoms, you can put stuff on it, and it can support the things that it holds. But this definition is really a stretch for most objects. So it is with saying that everything is conscious."
  },
  { 
    id: 10,
    author: "Kim Eric Drexler",
    body: "Ribosomes are proof that nanomachines built of protein and RNA can be programmed to build complex molecules."
  }
];

let Quote = (props) => {
  const ranNum = props.value.randomNumber;
  console.log("Props ran num",ranNum);
  let arr = props.value.quotes.map((data) => data).filter((data) => data.id == ranNum);
  console.log("Props Arr",arr);
  return <div> 
          <p id="author"></p>
            {console.log("Props Print out", props.value.quotes[props.value.randomNumber].id) }
          <p id="text"> </p>
         </div>
}
class App extends React.Component { 
  constructor(props){ 
    super(props);
    this.state = { 
      randomNumber: 0,
      quotes: [] 
    }
    this.handleClick = this.handleClick.bind(this);
    this.randomNumberGenerator = this.randomNumberGenerator.bind(this);
  }
  
  componentDidMount(){ 
    this.setState({ 
    quotes: [...arrOfQuotes]
    })
  }
  handleClick(){ 
    this.setState({ 
    randomNumber: this.randomNumberGenerator()
    });
  }
  randomNumberGenerator () {
   return Math.floor((Math.random() * 10));
  };
render() {
  console.log(this.state);
  console.log(this.randomNumberGenerator());
  return (
      <div id="quote-box">
        <h1> Random Quote Machine </h1>
         <div className="prettier">
           <Quote value={this.state} />
         </div>
        
        <button id="new-quote" onClick={this.handleClick}>New Quote</button>
    </div>
  )
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
2

That error tells you exactly what is wrong. You are trying to read the property id on something that doesn’t exist, it is undefined.

Because when you get to that line:

{console.log("Props Print out", props.value.quotes[props.value.randomNumber].id)

the quotes haven’t been defined yet so there is no id. The componentDidMount is not run yet. Why are you doing this in CDM? It’s not async.

There are a couple solutions. One would be to forget CDM and add those quotes in the constructor.

Another way would be to put some logic in your component, something like:

  if (props.value.quotes.length === 0)
    return null;
  return (
    <div> 
      <p id="author"></p>
      {console.log("Props Print out", props.value.quotes[props.value.randomNumber].id) }
      <p id="text"> </p>
    </div> 
  )

There are cleaner ways to do this, but this does the least damage to your code. It’ll just return null until there is something to render.

3

Thank you for replying really appreciate it I was trying to get a better understanding of what lifecycle methods are by just trying it out componentDidMount I guess I still need more practice. But the question is still there why am I able to see the complete object but not access any of its properties because it shows in the chrome console but gives an error when I try to access any of its properties.

4

I’m just greatly confused now

5

I see an object, but empty quotes. When I put

let Quote = (props) => {
  console.log('here are the quotes =>', props.value.quotes);
  //...

I get:

here are the quotes => Array(0)

Yes, there is an array there, but there is nothing in it. So, when you try to evaluate a property on an element on that array, it comes back as an error - there is no property there because there is no element in that array. It mounts the components before running CDM. There are other lifecycle methods like comonentWillMount or the now preferred getDerivedStateFromProps. Or just make sure that your component can handle if that array is empty.

Instead of using filter, I might recommend using find. If that comes back undefined, then return null from the component. And CDM is unnecessary - just build it in the constructor.

I’m just greatly confused now

Yes, React is confusing. It is a very different way of thinking about an app. But there are huge advantages once you get used to it. Everyone struggles with these concepts at first.

6

Thanks a lot really appreciate the help I think I’m a little closer to understanding this.

7

That’s how I got React, a little at a time. I was where you are about a year and a half ago. Now I’m a professional React developer. YMMV. Just keep at it.

8

what does ymmv stand for and thanks again

9

“your mileage may vary”