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

Рассмотрим компонент 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>; }

Проделайте аналогичные операции с компонентом User, созданным вами в предыдущих уроках.