title: How to loop over nested array in react?
body: <p>Let's say I have this faq array as one of my states:</p>
  
  <pre><code>this.state = {
      faqs: [
          {
              section: "Section One",
              faqList: [
                  {
                      question: "Q1",
                      answer: "A1"
                  },
                  {
                      question: "Q1",
                      answer: "A1"
                  }
              ]
          },
          {
              section: "Section Two",
              faqList: [
                  {
                      question: "Q1",
                      answer: "A1"
                  },
                  {
                      question: "Q1",
                      answer: "A1"
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>And I'd like to render them. This is how I tried to do it currently:</p>
  
  <pre><code>render() {
  
      const faqs = this.state.faqs;
  
      return (
      &lt;div&gt;   
          {faqs.map(faqSec =&gt; {
  
              return (
                  &lt;h2&gt;{faqSec.section}&lt;/h2&gt;
  
                  {faqSec.faqList.map(faq =&gt; {
                      return (
                          &lt;p&gt;faq.question&lt;/p&gt; 
                          &lt;p&gt;faq.answer&lt;/p&gt;                                           
                      )
                  })}
  
              )
          })}
      &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>However, an error occurs due to the nested map function:</p>
  
  <pre><code>SyntaxError: Unexpected token, expected , (80:8)
  </code></pre>
  
  <p>How do I loop through this nested object properly?</p>