title: Combine API results from multiple arrays into a single array in a React.js component
body: <p>I have the following React.js component where I get 10 multiple-choice trivia questions via an API call using fetch and recursively list them on the page via nested components.</p>
  
  <p>The API provides 'correct_answer' as string, and 'incorrect_answers' separately as an array of strings. In my current code, I am only able to list the 'correct' and 'incorrect' answers in their own components.</p>
  
  <p>What I would like to do is combine the 'correct' and 'incorrect' answers into a single array and then randomise the output of them, so that the correct answer is not always in the same place in the list. How would I alter my current code to that? I am an absolute beginner at React.js so any pointers are welcome, thanks.</p>
  
  <pre><code>import React, { Component } from "react";
  
      class QuestionContainer extends Component {
  
          constructor() {
              super();
              this.state = {
                  questions: []
              };
          }
  
          componentWillMount() {
              const RenderHTMLQuestion = (props) =&gt; (&lt;p dangerouslySetInnerHTML={{__html:props.HTML}}&gt;&lt;/p&gt;)
              const RenderHTMLAnswer = (props) =&gt; (&lt;li dangerouslySetInnerHTML={{__html:props.HTML}}&gt;&lt;/li&gt;)
              fetch('https://opentdb.com/api.php?amount=10&amp;category=9&amp;type=multiple')
                  .then(results =&gt; {
                      return results.json();
                  }).then(data =&gt; {
                      let questions = data.results.map((question, index) =&gt; {
                          return(
                              &lt;div key={index} className="questionWrapper"&gt;
                                  &lt;div className="question" key={question.question}&gt;
                                       &lt;RenderHTMLQuestion HTML={question.question} /&gt;
                                  &lt;/div&gt;
                                  &lt;ul className="answers"&gt;
                                      &lt;RenderHTMLAnswer key={question.correct_answer} HTML={question.correct_answer} /&gt;
  
                                     {question.incorrect_answers.map((answer, index) =&gt; (
                                          &lt;RenderHTMLAnswer key={index} HTML={answer} /&gt;
                                      ))}
                                 &lt;/ul&gt;
                              &lt;/div&gt;
                          )
                      })
  
                      this.setState({questions: questions});
                  })
  
              }
  
  
          render() {
              return (
                  &lt;div className="container2"&gt;
                      {this.state.questions}
                  &lt;/div&gt;
              )
          }
      }
  
  
      export default QuestionContainer;
  </code></pre>