title: React component wont display the return of a function
body: <p>I have a component that is supposed to display a "cards" containing information saved in an array in state. I get this information from a JSON file and save it into my array in a "componentDidMount". I then made a function called "displayFood" before the return of my render function, which I then use in my render functions return. The problem is that when I run the code no cards are being displayed.</p>
  
  <pre><code>import React from 'react'
  import "./style.scss";
  import FoodData from "./foodData.json";
  
  class Food extends React.Component {
      constructor(props){
          super(props);
          this.state={
              foodData: []
          }
      }
  
      componentDidMount(){
          FoodData.map((foodItem,index) =&gt; {
              var foodTemp = {
                  id: index,
                  name: foodItem.name,
                  pic: foodItem.pic,
                  serving: foodItem.serving,
                  calories: foodItem.calories,
                  sugar: foodItem.sugar,
                  protien: foodItem.protien
              }
              this.setState((prevState) =&gt; {
                  prevState.foodData.push(foodTemp)
              })
          })
      }
  
    render() {
  
      const displayFood = () =&gt; {
          var i;
          for(i = 0; i &lt; this.state.foodData.length; i++){
              return(
                  &lt;div className="food-card"&gt;
                      &lt;img src={require(`${this.state.foodData[i].pic}`)}/&gt;
                      &lt;ul&gt;
                          &lt;li&gt;{this.state.foodData[i].name}&lt;/li&gt;
                          &lt;li&gt;Serving: {this.state.foodData[i].serving}&lt;/li&gt;
                          &lt;li&gt;Calories: {this.state.foodData[i].calories}&lt;/li&gt;
                          &lt;li&gt;Sugar: {this.state.foodData[i].sugar}&lt;/li&gt;
                          &lt;li&gt;Protien: {this.state.foodData[i].protien}&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;button name={this.state.foodData[i].name}&gt;Add&lt;/button&gt;
                  &lt;/div&gt;
              )
          }
      }
  
        return(
          &lt;div&gt;
              &lt;div className="food-container"&gt;
              {
                  displayFood()       
              }
              &lt;/div&gt;
          &lt;/div&gt;
        )
    }
  }
  
  export default Food;
  </code></pre>