lift_state_up_3.jsx

function Parent () {
  const [value, setValue] = useState();

  function save () {
    server.save(value); // save value on the server
  }

  return <Child type="checkbox" value={value} setValue={setValue} />;
}

function Child ({ type, value, setValue }) {
  let renderedItem;
  switch (type) {
    case 'text':
      renderedItem = <Input type="text" value={value} onChange={(e) => setValue(e.target.value)} />;
      break;
    case 'checkbox':
      renderedItem = <Input type="checkbox" value={value} onChange={(e) => setValue(e.target.checked)} />;
      break;
    default:
      renderedItem = null;
  }

  return renderedItem;
}