Why do we use map for looping in reactjs but not the for loops(why don't they work)?

Why doesn’t the normal loop work in react and we end up using the map method?
For example, consider this code

import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 10 },
      { id: 3, value: 8 },
      { id: 4, value: 0 }
    ]
  };
  render() {
    return (
      <div>
        {this.state.counters.map(counter => (
          <Counter
            key={counter.id}
            value={counter.value}
            id={counter.id}
          ></Counter>
        ))}
      </div>
    );
  }
}

export default Counters;

If you’re asking why something doesn’t work you better show it. My first guess would be you didn’t do something that resembles what map means. For example, maybe you discarded all the results, in which case it shouldn’t have taken effect in any way.