title: Displaying multi dimensional array with ReactJS
body: <p>Just started with ReactJS and I'm looking for the most efficient code to display the array below in a table structure as described in the 'render' section. I have been using .map to iterate through the users/buttons objects, but with no success yet. </p>
  
  <p>In my code sample below, I want to take the userData array and display the content in separate rows (html table format)ie.</p>
  
  <p>Joe,Smith,[Click 1A],[Click2B] //'Click XX' are buttons</p>
  
  <p>Mary,Murphy,[Click 2A],[Click2B]</p>
  
  <p>How can I achieve this?</p>
  
  <p>Thanks</p>
  
  <pre><code>var MyButton = require('./mybutton.js');
  
  var userData =[{ 
  userButtons: [
  [{user: [{ id: 1, lastName: 'Smith', firstName: 'Joe', 
      buttons: [
          {button:[{ id:0, value: "Click 1A" enabled:1}]},
          {button:[{ id:1, value: "Click 1B" enabled:1}]}
      ]
      }]}],
  [{user: [{ id: 1, lastName: 'Murphy', firstName: 'Mary', 
      buttons: [
          {button:[{ id:0, value: "Click 2A" enabled:1}]},
          {button:[{ id:1, value: "Click 2B" enabled:1}]}
      ]
      }]
  }]
  ]}];
  
  var DisplayData = React.createClass({
    render: function() {
      // render userButtons in a table with data using &lt;MyButton&gt; ie.
      // &lt;table&gt;
      // &lt;tr&gt;&lt;td&gt;Joe&lt;/td&gt;&lt;td&gt;Smith&lt;/td&gt;&lt;td&gt;[Click 1A]&lt;/td&gt;&lt;td&gt;[Click 2A]&lt;/td&lt;/tr&gt;
      // &lt;tr&gt;&lt;td&gt;Mary&lt;/td&gt;&lt;td&gt;Murphy&lt;/td&gt;&lt;td&gt;[Click 2B]&lt;/td&gt;&lt;td&gt;[Click 2B]&lt;/td&gt;&lt;/tr&gt;
      // &lt;/table&gt;
    }
    }
  });
  React.render(
      &lt;DisplayData tArr = {userData} /&gt;
  , document.getElementById('content')
  );
  
  
  
  // mybutton.js
  var React  = require('react');
  
  module.exports = React.createClass({
    render: function() {
      return (
          &lt;button&gt;{this.props.value}&lt;/button&gt;
      )
    }
  });
  </code></pre>