How to map a JSON array to a List in ReactJS?
<p>I'm requesting a sample JSON array from <a href="http://jsonplaceholder.typicode.com/users" rel="nofollow noreferrer">http://jsonplaceholder.typicode.com/users</a> and creating a list of items using the name values of that array in a ReactJS project.</p>

<p>The list is a <a href="https://grommet.github.io/docs/list/" rel="nofollow noreferrer">Grommet</a> list and I use the <code>.map</code> function to map the web service data to each list item.</p>

<p>But when the code renders, instead of creating a list of names using the web service. It creates only one list item and renders the call to <code>.map</code> and <code>rows.push</code>.</p>

<p>Question:</p>

<p>How can you to map a JSON array to a List in ReactJS?</p>

<p><a href="https://i.stack.imgur.com/ew8qC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ew8qC.png" alt="enter image description here"></a></p>

<p>This is what I've tried, first getting the web service via an AJAX GET and then calling .map to map that data to a list:</p>

<pre><code>loadNameData() {
    $.ajax({
      url: 'http://jsonplaceholder.typicode.com/users',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  }

  getInitialState(){
    return {
       data: {
          names: [] 
       }
    };
  }

  componentDidMount() {
    this.loadAssetData();
  }

  render() {
      let layerNode;
      var rows = [];

      layerNode = (
        &lt;Layer flush={true} closer={true} onClose={() =&gt; this._onCloseLayer()} align='right'&gt;
          &lt;Box pad='medium' colorIndex='grey-3'&gt;
            &lt;Heading&gt;Filter Options&lt;/Heading&gt;
            &lt;Label&gt;Names&lt;/Label&gt;
                this.props.data.names.map(function(name) {
                    rows.push(&lt;ListItem justify="between"&gt;)
                    rows.push(&lt;span&gt;)
                    rows.push({name})
                    rows.push(&lt;/span&gt;)
                    rows.push(&lt;/ListItem&gt;)
                }
                &lt;List selectable={true} selected={0}&gt;       
                    {rows}
                &lt;/List&gt;           
          &lt;/Box&gt;
        &lt;/Layer&gt;
      );  

    return (
      &lt;Section pad="small" full="vertical" flex={true}&gt;         
                {layerNode}             
      &lt;/Section&gt;
    );
  }
</code></pre>