Simple Form

Form.js

function Form({ state, setState }) {
  const toggle = useCallback(() => {
    setState(state => ({ ...state, itMatters: !state.itMatters }))
  })
  const changeLetter = useCallback(l => e =>
    setState(state => ({ ...state, [l]: e.target.value }))
  )
  return (
    <form name="f">
      <h2>Does unnecessary re-rendering matter? </h2>
      <div style={{ display: "flex" }}>
        <div style={{ flex: 1 }}>
          <label
            htmlFor="toggle0"
            style={{ float: "right", marginRight: "1em" }}
          >
            Nope
          </label>
          <input
            style={{ float: "right" }}
            type="radio"
            name="t"
            value={false}
            id="toggle0"
            onChange={toggle}
          />
        </div>
        <div style={{ flex: 1 }}>
          <input
            style={{ float: "left", marginLeft: "1em" }}
            type="radio"
            name="t"
            value={true}
            id="toggle1"
            onChange={toggle}
          />
          <label htmlFor="toggle1" style={{ float: "left" }}>
            Of course!
          </label>
        </div>
      </div>
      {Object.keys(alphabet).map((l, i) => (
        <LetterInput
          key={l}
          l={l}
          i={i}
          value={state[l]}
          onChange={changeLetter(l)}
        />
      ))}
    </form>
  )
}

function LetterInput({ l, i, value, onChange }) {
  return (
    <div style={{ padding: "1em 0" }}>
      {`Letter ${i + 1}: `}
      <input
        style={{ width: "40%" }}
        id={l}
        className="input-letter"
        value={value}
        onChange={onChange}
      />
    </div>
  )
}