title: React .map only returning first item
body: <p>I've just started my React journey recently.  I am currently trying to render properties of an array of objects which is returned from my controller.</p>
  <p>The json:</p>
  <pre><code>[
      {
          &quot;reportID&quot;:4,
          &quot;reportDescription&quot;:&quot;Commission Bonus Register&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;CommissionBonusRegister&quot;
      },
      {
          &quot;reportID&quot;:5,
          &quot;reportDescription&quot;:&quot;Reset Government ID&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;ResetGovtID&quot;
      },
      {
          &quot;reportID&quot;:6,
          &quot;reportDescription&quot;:&quot;Distributor Chase Up Report&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;DistributorChaseUpReport&quot;
      },
      {
          &quot;reportID&quot;:7,
          &quot;reportDescription&quot;:&quot;Vietnam Distributor Export&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;VietnamDistributorExport&quot;
      },
      {
          &quot;reportID&quot;:8,
          &quot;reportDescription&quot;:&quot;Vietnam Order Export&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;VietnamOrderExport&quot;
      },
      {
          &quot;reportID&quot;:9,
          &quot;reportDescription&quot;:&quot;Distributor List by status and period&quot;,
          &quot;reportNotes&quot;:&quot;&quot;,
          &quot;reportName&quot;:&quot;DistributorsList&quot;
      }
  ]
  </code></pre>
  <p>React component code:</p>
  <pre><code>    constructor(props) {
          super(props);
          this.state = {
              linkscontent: [],
              loading: true,
              refresh: true
          }
          this.populateReportsLinks = this.populateReportsLinks.bind(this);
      }
  
      async componentDidMount() {
          await this.populateReportsLinks();
      }
    
    render() {
         
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              :
              this.state.linkscontent.map(([reports], index) =&gt; {
                  return &lt;li key={reports.reportID}&gt;{reports.reportDescription}&lt;/li&gt;
              });
  
          return (
              &lt;div&gt;
                  &lt;h1 id=&quot;tabelLabel&quot; &gt;Reports&lt;/h1&gt;
                  &lt;ul&gt;
                      {contents}
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
         
        
      }
  
     async populateReportsLinks() {
          const response = await fetch('reports')
              .then(res =&gt; res.json())
              .then(data =&gt;
                  this.setState({ linkscontent: [data], error: data.error || null, loading: false, refresh: !this.state.refresh }));
         
          return response;
      }
  </code></pre>
  <p>After two days of frustration I have finally managed to get the first item to display, but only the first item. Ive read so many articles and forum solutions that seem to indicate this should work. Can anyone help me figure out what is wrong here?</p>