Редактирование стейта в внучатом компоненте

Рассмотрим компонент Product, полученный нами в предыдущем уроке:

function 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>;
}
Легко заметить, что код для названия продукта и для цены продукта практически дублируется. Давайте вынесем этот код в отдельный компонент ProductField:

function ProductField({ id, text, type, isEdit, editProd }) {
return isEdit
? <input value={text} onChange={event => editProd(id, type, event)} />
: <span>{text}</span>
;
}
Внесем изменения в компонент Product:

function 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>;
}