title: React won`t render array map function
body: <p>Hello I am new with new with React js. We have to create a project for counting points for teams, there are 4 teams in total. Every team has 5 children in it. Now I created an array to have 5 counts with id. The 5 counters are meant for the children. You should be able to add points for every child. So it is possible to update it by id with buttons. I`m using React in laravel. Here is the code:</p>
  
  <pre><code>export default class Gryffindor extends Component {
      constructor(props) {
          super(props);
          this.state = {
              counters: []
          };
          this.fetchCounter = this.fetchCounter.bind(this);
      }
  
      fetchCounter(e) {
          const counters = [
              { id: 1, amount: 0 },
              { id: 2, amount: 0 },
              { id: 3, amount: 0 },
              { id: 4, amount: 0 },
              { id: 5, amount: 0 }
          ];
          this.setState({ counters });
      }
  
  
      render() {
          return &lt;CounterBody counters={this.state.counters} /&gt;;
      }
  }
  
  const CounterBody = ({ counters }) =&gt; (
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Test&lt;/th&gt;
                  &lt;th&gt;Test&lt;/th&gt;
                  &lt;th&gt;Test&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {counters.map(counter =&gt; (
                  &lt;tr key={counter.id}&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;{counter.amount}&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              ))}
          &lt;/tbody&gt;
      &lt;/table&gt;
  );
  
  if (document.getElementById("Gryffindor")) {
      ReactDOM.render(&lt;Gryffindor /&gt;, document.getElementById("Gryffindor"));
  }
  </code></pre>
  
  <p>I have no idea why it is not showing up. Can someone help me?</p>