title: How to Consume an API & Display Results in a List
body: <p>I'm creating a trivia game using ReactJS, and the following API endpoint: <a href="https://opentdb.com/api.php?amount=5&amp;difficulty=medium&amp;type=boolean" rel="nofollow noreferrer">https://opentdb.com/api.php?amount=5&amp;difficulty=medium&amp;type=boolean</a> </p>
  
  <p>From my understanding, I want to consume the API in <code>ComponentDidMount()</code> lifecycle method. From there I'm trying to <code>map()</code> over each item in this response (there should be 5 questions in total), and save them to an empty questions array (which is part of my component's state). Finally, I want to display these questions in a list.</p>
  
  <p>I've tried all sorts of angles including <code>async await</code>, <code>fetch()</code> &amp; <code>.then()</code>, <code>using axios.get</code>, etc. Here's an example of what I've been trying most recently. I'm just not sure how to consume the API, save those questions to the empty questions array to state, and then iterate over, and render the questions in the DOM.</p>
  
  <p>Please note: I have tried <code>console.log(this.state.questions)</code>, which shows the response as code 200, and my original API endpoint URL, but no questions data. I don't understand where the questions are at this point! Please help!</p>
  
  <pre class="lang-js prettyprint-override"><code>
  class App extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        questions: [],
        score: 0,
        current: 0,
        loading: false
      }
    }
  
  async componentDidMount() {
      try {
        this.setState({ loading: true })
        this.setState({ questions: await fetch('https://opentdb.com/api.php?amount=5&amp;difficulty=medium&amp;type=boolean'), loading: false })
        console.log("state", this.state.questions);
        console.log("props", this.props.questions);
      } catch (err) {
        console.log(err)
      }
    }
    }
  
    componentDidUpdate(){
      console.log("component just updated!");
    }
  
  // another ComponentDidMount Attempt
  // async componentDidMount(){
  //     try {
  //       this.setState({loading:true})
  //       this.setState({questions: await fetch('https://opentdb.com/api.php?amount=5&amp;difficulty=medium&amp;type=boolean'), loading: false})
  //         .then(questions =&gt; questions.json())
  //         .then(questions =&gt; this.setState({questions, loading:false}))
  //         console.log("state", this.state.questions);
  //         console.log("props", this.props.questions);
  //       } catch(err) {
  //         console.log(err)
  //       }
  //
  //   }
  
  // attempt with axios ()
      // componentDidMount() {
      // axios
      //   .get("https://opentdb.com/api.php?amount=5&amp;difficulty=medium&amp;type=boolean")
      //   .then(response =&gt; {
      //     this.setState({ question: response.data.question });
      //     this.setState({ category: response.data.category });
      //     // this.setState({ type: response.data.type });
      //     // this.setState({ url: response.data.url });
      //     // this.setState({ score: response.data.score });
      //     console.log("axios GET worked");
      //   })
      //   .catch(err =&gt; {
      //     console.log(
      //       "Oops, something broke with GET in componentDidMount() - we've got a: ",
      //       err.message
      //     );
      //   });
      // }
  
  // below is having an issue with .map() - maybe bc questions
  // is object containing arrays(?)
    //
    // render() {
    //   return (
    //     &lt;div&gt;
    //       {this.state.loading
    //         ? "loading..."
    //         :  &lt;div&gt;
    //           {
    //             this.state.questions.map(question =&gt; {
    //             return(
    //             &lt;div&gt;
    //               &lt;h3&gt;Category: {question.category}&lt;/h3&gt;
    //               &lt;h4&gt;Question: {question.question}&lt;/h4&gt;
    //             &lt;/div&gt;
    //             )
    //           })
    //         }
    //         &lt;/div&gt;
    //       }
    //
    //       &lt;HomeCard /&gt;
    //       &lt;QuizCard /&gt;
    //       &lt;ResCard /&gt;
    //     &lt;/div&gt;
    //   );
    // }
  
  export default App;
  
  
  </code></pre>