title: Adding child elements dynamically in React (state array)
body: <p>I am working to build a Pokedex from JSON data in React. I am refactoring this project from one I built in jQuery, so it could be that the jQuery approach is causing me to misunderstand how to approach this problem with proper React thinking. What's tripping me up so far is how to dynamically render multiple child elements based on the JSON I pass from a the parent element (this would be jQuery <code>append</code>).</p>
  
  <p>Here is my App.js code:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div className="App background"&gt;
          &lt;div className="content"&gt;
            &lt;Header /&gt;
            &lt;TilesContainer pokedexName="national"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>The TilesContainer essentially receives the name of a Pokedex and makes a call to an API. The individual Pokemon names are stored in an array in the TilesContainer state (<code>this.state.pokemon</code>), as below.</p>
  
  <pre><code>class TilesContainer extends Component {
  
    constructor(props){
      super(props);
      this.state = {pokemon: []};
      this.getPokemon = this.getPokemon.bind(this);
      this.tiles = this.tiles.bind(this);
    }
  
    getPokemon() {
      // set this.state.pokemon to the list
      let link = 'https://pokeapi.co/api/v2/pokedex/' + this.props.pokedexName + '/';
      fetch(link)
      .then(response =&gt; response.json())
      .then(myJson =&gt; {
        let list = myJson['pokemon_entries'];
        list.forEach(pokemon =&gt; {
          this.state.pokemon.push(pokemon);
        })
      })
      this.tiles();
     }
  
    tiles() {
      if (this.state.pokemon.length &gt; 0) {
        return (
            this.state.pokemon.map(pokemon =&gt; {
            &lt;Tile number={pokemon.entry_number}/&gt;
          })
        )
      }
    }
  
    render(){
      this.getPokemon();
      return (
        &lt;div id="tiles-container"
             className="tiles-container"&gt;
               &lt;h1&gt;TilesContainer Test&lt;/h1&gt;
               &lt;Tile number={1} /&gt;
  
        &lt;/div&gt;
      )
    }
  }
  
  export default TilesContainer
  </code></pre>
  
  <p>Again, the idea is that a Pokemon tile is render for each Pokemon in the Pokedex JSON (which for now I've stored in <code>this.state.pokemon</code> - not sure if this is the best approach). I found an example here on Stack Overflow that uses an additional function (this this case <code>this.tiles()</code> to generate what I think is an array of returns with different child elements). The <code>&lt;Tile number={1} /&gt;</code> is a hardcoded example of how the tile is called. </p>
  
  <p>Currently no dynamically-rendered tiles show up when the code runs. Is this the correct approach. I'd really appreciate any suggestions.</p>
  
  <p>Thanks! </p>