App.js

import React from 'react';
import './App.css';

class App extends React.Component {
  state = {anonymousFunctions: true, count: 100};
  updateCount = e => {
    this.setState({count: e.target.value});
  };
  updateAnonymous = () => {
    this.setState({anonymousFunctions: !this.state.anonymousFunctions});
  };
  render() {
    const {anonymousFunctions, count} = this.state;
    console.log({anonymousFunctions});
    return (
      <div className="App">
        <h1>{count}</h1>
        <div>
          <label>Num Fields: </label>
          <input value={count} onChange={this.updateCount} /> <br />
          <label>Use Anonymous Functions</label>
          <input
            type="checkbox"
            checked={anonymousFunctions}
            onChange={this.updateAnonymous}
          />
        </div>
        <br />
        {anonymousFunctions ? (
          <AnonymousNumberList count={count} />
        ) : (
          <NumberList count={count} />
        )}
      </div>
    );
  }
}

export default App;

function AnonymousNumberList({count}) {
  let list = [];
  for (let i = 0; i < count; i++) {
    list.push(<Number getNumber={() => i} key={i} />);
  }
  return list;
}

function NumberList({count}) {
  let list = [];
  for (let i = 0; i < count; i++) {
    list.push(<Number number={i} key={i} />);
  }
  return list;
}

function Number({number, getNumber}) {
  return (
    <h1 style={{color: number != null ? 'red' : 'blue'}}>
      {number != null ? number : getNumber()}
    </h1>
  );
}