title: React native make "buttons" dynamically from API
body: <p>I'm new to React Native` and I've been trying to create a view with the number of buttons dynamically created from the data that I fetch from the API.</p>
  
  <p>One of my problems is that the data that is returned doesn't have any name that I can point like <code>item.number</code>.</p>
  
  <p>First I tried to do a <code>&lt;Flatlist/&gt;</code> but I wasn't getting the design that I wanted, like this:</p>
  
  <p><img src="https://i.imgur.com/HGYQiMz.png" height="350"></p>
  
  <p>so now I'm trying to make in a different way, but I'm always getting the error: </p>
  
  <blockquote>
    <p>Cannot read property '0' of undefined</p>
  </blockquote>
  
  <p><strong>data.json:</strong></p>
  
  <pre><code>
  {  
     "sEcho":0,
     "iTotalRecords":"75",
     "iTotalDisplayRecords":"73",
     "aaData":[  
        [  
           "1",
           "1",
           "Consumidor Final",
           "999999990",
           "",
           "",
           null,
           ", ",
           "21110000",
           "1",
           "1",
           "1"
        ],
        [  
           "2",
           "1000",
           "xxxxxx",
           "xxxxx",
           "",
           "",
           null,
           ", ",
           "xxxx",
           "15",
           "1",
           "1"
        ]
     ]
  }
  </code></pre>
  
  <p>How I am fetching the data;</p>
  
  <pre><code>getClientes = async (token, opcao, search, pag, numRows) =&gt; {
    var url = "https://xxxx/xxxx/xxx/xxxx/xxx/tabelas/clientes?_token=" + token + "&amp;opcao= " + opcao + "&amp;search=&amp;pag=&amp;numRows=" + numRows;
  
    fetch(url)
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
        this.setState({
          dataSource: responseJson.aaData,
          isLoading: false,
          numRows: responseJson.iTotalDisplayRecords
        })
  
      console.log(responseJson.iTotalDisplayRecords + " total");
      console.log("CLIENTES: " + responseJson.aaData[0][2]);
      console.log(this.state.dataSource[0][2]);
    })
    .catch((error) =&gt; {
      console.log(error);
    })
  }
  </code></pre>
  
  <p>How I render the buttons:</p>
  
  <pre class="lang-js prettyprint-override"><code>renderClientes = (numRows, data) =&gt; {
    console.log(numRows + "azxcvb");
    console.log(data.length + "render Clientes");
    const views = [];
  
    for (let i = 0; i &lt;= numRows; i++) {
      for (let j = 0; j &lt;= 11; j++) {
        views.push(
          &lt;TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }} key={i}&gt;
            &lt;View style={{ flex: 1, justifyContent: 'center', marginLeft: 5 }}&gt;
              &lt;Text style={{ fontSize: 18, color: 'green' }}&gt;
                {data[i][j]}
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
        );
      }
    }
  
    return views;
  }
  </code></pre>
  
  <p>then: </p>
  
  <pre class="lang-js prettyprint-override"><code> render() {
    return (
     ...
   (this.state.numRows != 0) ? this.renderClientes(this.state.numRows, this.state.dataSource) : null)
  }
  </code></pre>
  
  <p>How can I solve my problem? And if there is any easier way to do this, what is?</p>