TypeError: Cannot read property '0' of undefined

JavaScript
1

I have this Error, but i don’t get why this is happening. Because i get list of object and now with this.state.quoteList.quotes[0] i want to select one element of that object array. This is the entire Component.

How do I solve this ?
Why this is happening ?

I already search for it and couldn’t find answer.

import React, {Component} from 'react';

import Footer from './Footer';

let listOfColors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", 
"#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", 
"#f1c40f", "#e67e22", "#e74c3c", "#f39c12", "#d35400", "#c0392b"];


class RandomQuote extends Component{

    constructor(){
        super();
        this.state = {
            quoteList: []
        };
        this.changeColor = this.changeColor.bind(this);
        this.tweet = this.tweet.bind(this);
    }

    componentDidMount() {
        fetch("https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json")    
            .then(response => response.json())
            .then(data => { 
                this.setState({
                    quoteList: data
                })
            })  
    }

    changeColor(){
        console.log("Working!");
        
    }
    
    tweet(){
        console.log("Working!");
    }

    render(){
        console.log(this.state.quoteList.quotes[0]);
        return(
            <div className="Random-Quote">

                <blockquote className="blockquote">
                    <p id="text">Quote Placeholder</p>
                    <footer className="blockquote-footer" id="author">Author Placeholder</footer>                
                </blockquote>

                <div className="Buttons-stage">
                    <button id="shareMessage" className="btn" onClick={this.tweet()}></button>
                    <button id="getMessage" className="btn" onClick={this.changeColor()}>New Quote</button>                
                </div>

                <Footer />

            </div>
        );
    }
}

export default RandomQuote;
2

On first render quoteList is an empty array (quotes) doesn’t exits.
You should check if quotes exist in render function.

3

I am doing

console.log(this.state.quoteList.quotes);

first thing inside render. If this is what you mean. And i get all of the quotes. The problem Happens when i want to select one quotes object so i can get quote and author for that specific object.

4

You get all the quotes after the initial render.
Add check before console:

if (!this.state.quotesList.quotes) return;
5

When i placed that line of code it says : “Cannot read property ‘quotes’ of undefined”

Here take a look at the app: https://codesandbox.io/s/018q8lrnlw

6

I have a typo in my example. It should be quoteList. Also render must return something:

if (!this.state.quoteList.quotes) return null;
1 Like
7

Yes i can access it inside render without a problem and use it to display the very first quote.

render() {
    if (!this.state.quoteList.quotes) return null;
    console.log(this.state.quoteList.quotes);
    return (
      <div className="Random-Quote">
        <blockquote className="blockquote">
          <p id="text">
            Quote Placeholder: {this.state.quoteList.quotes[0].quote}
          </p>
          <footer className="blockquote-footer" id="author">
            Author Placeholder: {this.state.quoteList.quotes[0].author}
          </footer>
        </blockquote>

        <div className="Buttons-stage">
          <button id="shareMessage" className="btn" onClick={this.tweet()} />
          <button id="getMessage" className="btn" onClick={this.changeColor()}>
            New Quote
          </button>
        </div>

        <Footer />
      </div>
    );
  }