# Random Quote Machine: TypeError

**URL:** <https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292>\
**Category:** General\
**Created:** [April 24, 2020, 2:25pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292 "2020-04-24T14:25:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![malcolmjconnor](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/malcolmjconnor/32/130768_2.png) [@malcolmjconnor](https://forum.freecodecamp.org/u/malcolmjconnor)\
**Post date:** [April 24, 2020, 2:25pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/1 "2020-04-24T14:25:18Z")

</div>

Hello!

I am getting a ‘TypeError: cannot read property quote of undefined’

I know that the ‘quotes’ array in this.state is undefined, but not sure how to fix.  
Can someone help me?

Thanks!

```auto
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      apiResult: null,
      author: "",
      quotes: [],
      text: "",
      isLoaded: false,
      bgColor: "#f99192",
      number: 0,
      clickCount: 0
    };
    this.generateRandomNumber = this.generateRandomNumber.bind(this);
  }

  componentDidMount() {
    fetch(
      "https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
    )
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          quotes: json
        });
      });
  }

  generateRandomNumber(quotes) {
    this.setState({
      number: Math.floor(Math.random() * quotes.length)
    });
  }

  render() {
    var { quotes, isLoaded } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div id="quote-box">
          <h1 id="text">{quotes.quotes[this.state.number].quote}</h1>
          <p id="author">{quotes.quotes[this.state.number].author}</p>
          <button
            id="new-quote"
            className="btn btn-secondary"
            onClick={this.generateRandomNumber}
          >
            New Quote
          </button>
          <a
            id="tweet-quote"
            className="btn btn-primary"
            href="twitter.com/intent/tweet"
            role="button"
          >
            Tweet Quote
          </a>
        </div>
      );
    }
  }
}

export default App;

```

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [April 24, 2020, 2:38pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/2 "2020-04-24T14:38:36Z")

</div>

Welcome, malcolm.

> [@malcolmjconnor](#):
>
> number: Math.floor(Math.random() \* quotes.length)

This line has an issue…

---

<div class="post-metadata">

**Author:** ![malcolmjconnor](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/malcolmjconnor/32/130768_2.png) [@malcolmjconnor](https://forum.freecodecamp.org/u/malcolmjconnor)\
**Post date:** [April 24, 2020, 3:59pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/3 "2020-04-24T15:59:41Z")

</div>

Thanks for the response!  
I tried using this.state.number and played around with parenthesis placement. I can’t figure out what I’m missing

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [April 24, 2020, 5:00pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/4 "2020-04-24T17:00:47Z")

</div>

Well, it is meant to be:

```auto
number: Math.floor(Math.random() * this.state.quotes.length)

```

It would be useful for you to `console.log()` both `quotes`, and `this.state.number`. Probably easiest for you to place this within the render function.

Also, either take my first suggestion, or fix the function call to this function:

```auto
generateRandomNumber(quotes) {
...
onClick={this.generateRandomNumber}

```

You are calling a function that takes one argument, but are not providing it one.

---

<div class="post-metadata">

**Author:** ![malcolmjconnor](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/malcolmjconnor/32/130768_2.png) [@malcolmjconnor](https://forum.freecodecamp.org/u/malcolmjconnor)\
**Post date:** [April 25, 2020, 8:17pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/5 "2020-04-25T20:17:10Z")

</div>

I made the edit to the generateRandomNumber function, but the quotes array is still undefined

```auto
generateRandomNumber() {
    this.setState({
      number: Math.floor(Math.random() * this.state.quotes.length)
    });
  }

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:57pm UTC](https://forum.freecodecamp.org/t/random-quote-machine-typeerror/378292/6 "2021-06-01T18:57:49Z")

</div>