Avoiding repetition

[oliverjam]

Since you have the power of JS at your disposal you can avoid repeating yourself too much to render identical copies of a component.

It's easy if you have an array of data to map over (array.map(thing => <div>{thing}</div>), but here's a trick even if you don't:

Array.from({ length: 9 }, (_, index) => (
  <Btn
    key={`${button}-index`} // not ideal but there's nothing else unique to use
    zombiesAlive={this.state.zombiesAlive}
    increment={this.increment}
    decrement={this.decrement}
    firstZombieAppeared={this.setFirstZombieAppeared}
  />
))

Array.from takes an object with a length as the first argument and a map function as the second. This produces an array of 9 buttons for React to render