title: How to map a JSON array to a List in ReactJS?
body: <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>