Redigering van staat in 'n kleinkind komponent in React

Laat ons die komponent Product wat ons in die vorige les verkry het, oorweeg:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    name: {
      isEdit
      ? <input value={name} onChange={event => editProd(id, 'name', event)} />
      : <span>{name}</span>
    }
    cost: {
      isEdit
      ? <input value={cost} onChange={event => editProd(id, 'cost', event)} />
      : <span>{cost}</span>
    }
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}

Dit is maklik om op te merk dat die kode vir die produknaam en vir die produkprys amper dupliseer word. Kom ons skei hierdie kode uit in 'n aparte komponent ProductField:

jsxfunction ProductField({ id, text, type, isEdit, editProd }) {
  return isEdit
    ? <input value={text} onChange={event => editProd(id, type, event)} />
    : <span>{text}</span>
  ;
}

Laat ons veranderinge aanbring in die komponent Product:

jsxfunction Product({ id, name, cost, isEdit, toggleMode, editProd }) {
  return <div>
    name: <ProductField
      id={id}
      text={name}
      type="name"
      isEdit={isEdit}
      editProd={editProd}
    />,
    
    cost: <ProductField
      id={id}
      text={cost}
      type="cost"
      isEdit={isEdit}
      editProd={editProd}
    />
    
    <button onClick={() => toggleMode(id)}>
      {isEdit ? 'save': 'edit'}
    </button>
  </div>;
}