React won`t render array map function - reactjs

Question

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:
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 <CounterBody counters={this.state.counters} />;
}
}
const CounterBody = ({ counters }) => (
<table>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
{counters.map(counter => (
<tr key={counter.id}>
<td></td>
<td>{counter.amount}</td>
<td></td>
</tr>
))}
</tbody>
</table>
);
if (document.getElementById("Gryffindor")) {
ReactDOM.render(<Gryffindor />, document.getElementById("Gryffindor"));
}
I have no idea why it is not showing up. Can someone help me?

Answer 1

You are never calling fetchCounter. You could call it inside componentDidMount.
class Gryffindor extends React.Component {
constructor(props) {
super(props);
this.state = {
counters: []
};
this.fetchCounter = this.fetchCounter.bind(this);
}
componentDidMount() {
this.fetchCounter();
}
fetchCounter() {
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 <CounterBody counters={this.state.counters} />;
}
}
const CounterBody = ({ counters }) => (
<table>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
{counters.map(counter => (
<tr key={counter.id}>
<td />
<td>{counter.amount}</td>
<td />
</tr>
))}
</tbody>
</table>
);
ReactDOM.render(<Gryffindor />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>