I'm having trouble {Random Quote Machine} (ReactJS)

JavaScript
1

I am using ReactJS and having trouble with getting information from the API I am fetching from. Here is the component I am working with to get my button to generate new quotes for me:

class Text extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myApiData: [],
      quote: "",
      author: ""
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    fetch("https://type.fit/api/quotes")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
      this.setState({myApiData:json}) // Please ignore this line, I was testing something
        console.log(data[0].author);
      });
  }

I keep getting this error here:

Uncaught (in promise) TypeError: Cannot read property ‘setState’ of undefined
at pen.js?key=pen.js-74cb038e-1229-1067-3a45-b49e4cdb7a96:42

How can i use React’s fetch to store data into a variable?

Here is my CodePen

2

I think using componentDidMount would be better to get the data into the array myApiData . Then you can use handleClick method to fill the quote and author fields in the state . You can do that by getting a random index and then assigning the quote and the author from that index in the myApiData array .

const header = <h1>React Random Quote Machine</h1>;
var tweet = (
  <a href="#" id="tweet-quote" title="Tweet me!">
    <i class="fab fa-twitter"></i>
  </a>
);

class QuoteBox extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        {header}
        <div id="quote-box">
          {tweet}
          <Text />
        </div>
      </div>
    );
  }
}

// Text:
class Text extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myApiData: [],
     randomQuote : {
       text: "",
       author: ""
     }
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount() {
    fetch("https://type.fit/api/quotes")
      .then(function (response) {
        return response.json();
      })
      .then((data) => {
        this.setState({ myApiData: data });
      });
  }
  
  handleClick(event) {
    event.preventDefault();
    const randNum = Math.floor(Math.random() * this.state.myApiData.length);
    const randQuote = this.state.myApiData[randNum];

    this.setState({
      randomQuote: randQuote,
    });
  }

  render() {
    return (
      <div>
        <h1 id="text">{this.state.randomQuote.text}</h1>
        <p id="author">- {this.state.randomQuote.author}</p>
        <div class="center">
          <button id="new-quote" onClick={this.handleClick}>
            New Quote
          </button>
        </div>
      </div>
    );
  }
}

// ReactDOM
ReactDOM.render(<QuoteBox />, document.getElementById("root"));

I just added componentDidMount() and changed the handleClick to load the quotes .

1 Like
3

Super helpful! Thank you for the help! :grin:

4

Glad I could help . Welcome . Please also repeat the project from scratch so that you will not have a problem in the future .