title: React - Rendering an array of objects using Map
body: <p>I'm trying to <code>render an array of objects using Map</code> and so far I've only been able to render the first item to the browser.</p>
  
  <p>I figured something's up with my .map function, but I don't know enough about React and JS to pinpoint the problem.</p>
  
  <p>Here's my App.js file:</p>
  
  <p>// <code>import</code> stuff is here</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        items: []
      };
      this.componentWillMount = this.componentWillMount.bind(this);
    }
  
    componentWillMount() {
      fetch('THE-JSON-URL-IS-HERE')
      .then(res =&gt; res.json())
      .then(data =&gt; {
        this.setState({ items: data });
      });
  
   render() {
  
  const { items } = this.state;
  
  return (
    &lt;div className="App"&gt;
  
      { items.map((item, num) =&gt; {
          return (
            &lt;div className="people"&gt;
  
              &lt;div className="elem"&gt;
                &lt;p key={num}&gt;{item.elems}&lt;/p&gt;   
              &lt;/div&gt;     
  
                &lt;p key={num}&gt;&lt;strong&gt;{item.name}&lt;/strong&gt;&lt;/p&gt;
                &lt;p key={num}&gt;&lt;small&gt;{item.title}&lt;/small&gt;&lt;/p&gt;             
  
              &lt;div className="hidden"&gt;
                &lt;p key={num}&gt;&lt;small&gt;{item.email}&lt;/small&gt;&lt;/p&gt;
                &lt;p key={num}&gt;&lt;small&gt;&lt;strong&gt;Office: &lt;/strong&gt;{item.office}&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
              {/* &lt;p&gt;{item.manager}&lt;/p&gt; */}
            &lt;/div&gt;
  
          );
      })}        
    &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And here's a sample of the JSON file:</p>
  
  <pre><code>[
    {
      "elems": "Pr",
      "name": "Abby Langdale",
      "title": "President",
      "email": "alangdale0@hubpages.com",
      "office": "Javanrud",
      "manager": [
        {
          "elems": "Vp",
          "name": "Johnnie Mouncey",
          "title": "Vice President",
          "email": "jmouncey0@cnet.com",
          "office": "Canto",
          "manager": [
            {
              "elems": "Vp",
              "name": "Concordia Burgwyn",
              "title": "VP Quality Control",
              "email": "cburgwyn0@dyndns.org",
              "office": "Zhoukou",
              "manager": [
                {
                  "elems": "En",
                  "name": "Prissie Sainsberry",
                  "title": "Web Developer IV",
                  "email": "psainsberry0@yellowbook.com",
                  "office": "Tugu",
                  "manager": null
                },
  </code></pre>
  
  <p>etc. Abby's info is all that I've rendered.</p>