title: Map an array of arrays with ReactJS
body: <p>So what I'm trying to do is map an array of arrays</p>
  
  <p>Firstly I've started simple and got this working - a simple array of countries (well, country codes)</p>
  
  <pre><code>{countries.map((value, index) =&gt; {
    return (
      &lt;span
        key={index}
        className="semi-bold clear"
      &gt;
        &lt;h2&gt;Hello world&lt;/h2&gt;
  
        &lt;hr /&gt;
      &lt;/span&gt;
    )
  })}
  </code></pre>
  
  <p>And here's what it looks like, browser on the left and console on the right;</p>
  
  <p><a href="https://i.stack.imgur.com/19Cq2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19Cq2.png" alt="Console log 1"></a></p>
  
  <p>Great! All good so far, next up is my array of arrays - here's what this looks like in the console log</p>
  
  <p><a href="https://i.stack.imgur.com/eCAkj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCAkj.png" alt="Console log 2"></a></p>
  
  <p>So this is an array of 4 arrays and this is where I fall down, using the same piece of example code above but replacing the first array with this array of 4 arrays but when I do so the whole thing falls over, I don't understand why that wouldn't work, I was expecting to return 4 hello worlds like before</p>
  
  <p>In case it's not clear, here's a mock up of what I eventually want to achieve in the browser!</p>
  
  <p><a href="https://i.stack.imgur.com/XIqVQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XIqVQ.png" alt="Finished browser view"></a></p>