Why is this code returning an error?

1

I have this class component

import React, {Component} from 'react';
import Author from './author';
import  NewQuote from './new-quote';
import TweetQuote from './tweet-quote';
import Text from './text';
import quotes from './quotes';
 class App extends Component{
     constructor(){
       super()
       this.state = {quotes, n: this.onLoadHandle() }
       this.onLoadHandle = this.onLoadHandle.bind(this)

     }
     onLoadHandle(){
        this.max = this.state.quotes.length;
        this.randInt = Math.round(Math.random() * 10);
        while(this.randInt < 0 || this.randInt >= this.max){
           this.randInt = Math.round(Math.random() * 10); 
        }
        return this.state.quotes[this.randInt]
     }
     render(){
       return(
         <div id = 'quote-box'>
             <Text quote = {this.onLoadHandle().quote}/>
             <Author author = {this.onLoadHandle().author} /> 
    
             <TweetQuote />
         </div>
       )
     }
 }
 export default App;

However i keep getting this particular error

TypeError: Cannot read property 'quotes' of undefined

in the ./quotes file i have this array

const  quotes = [
    {
        id: '1',
        quote: 'The Way To Get Started Is To Quit Talking And Begin Doing.',
        author: 'Walt Disney'
    },
    {
        id: '2',
        quote: "Don’t Let Yesterday Take Up Too Much Of Today.",
        author: 'Will Rogers'
    },
    {
        id: '3',
        quote: "It’s Not Whether You Get Knocked Down, It’s Whether You Get Up.",
        author: "Vince Lombardi"
    },
    {
        id: '4',
        quote:"If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.",
        author: "Steve Jobs"
    },
    {
        id: '5',
        quote: " Failure Will Never Overtake Me If My Determination To Succeed Is Strong Enough.",
        author: "Og Mandino"
    }
]
export default quotes;

Can someone explain to me what is happening here?

2

I have no idea but why do all of your import names start with a capital letter except for ‘quotes’? Does that make any difference?

3

Why do you have n: this.onLoadHandle() inside the state? Remove that.

Why are you setting properties on the object (this.max and this.randInt), you are not even using them as such. They can just be local variables in the method. Also, why would randInt be less than zero? Would it not be easier to just generate a random number between 0 and quotes.length - 1 (Math.random).

How are you ever going to get the right matching quote and author when they come from running the same method separately? Except by chance of course.

1 Like
4

Because your constructor calls onLoadHandle before this.state is assigned a value.

2 Likes
5

Have you tried this.quotes on the above?

6

Thanks for the feedback. Changing first letter to lowercase doesn’t fix the problem !

7

Thanks for the feedback @lasjorg. There are lots of things i have to improve in this code but i also want to correctly interpret error messages to easily debug in react.
The error message

TypeError: Cannot read property 'quotes' of undefined

didn’t make any sense to me.

8

No, I was wondering if changing quotes to Quotes would. Ignore my suggestion; I don’t know about React. I just noticed that one difference, that’s all.