Привязка инпутов к объекту в React

Пусть в стейте хранится объект:

const initObj = {
prop1: 'value1',
prop2: 'value2',
prop3: 'value3',
}

function App() {
const [obj, setObj] = useState(initObj);

return <div>
{obj.prop1}-{obj.prop2}-{obj.prop3}
</div>;
}
Давайте выведем каждое свойство нашего объекта в отдельном инпуте:

function App() {
const [obj, setObj] = useState(initObj);

return <div>
<input value={obj.prop1} />
<input value={obj.prop2} />
<input value={obj.prop3} />

<br />
{obj.prop1}-{obj.prop2}-{obj.prop3}
</div>;
}
Давайте теперь к каждому инпуту привяжем событие onChange. В качестве обработчика назначим одну общую функцию:

function App() {
const [obj, setObj] = useState(initObj);

return <div>
<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />

<br />
{obj.prop1}-{obj.prop2}-{obj.prop3}
</div>;
}
Как вы видите, функция handleChange первым параметром принимает имя соответствующего свойства объекта.

Давайте напишем реализацию нашей функции:

function handleChange(prop, event) {
const copy = Object.assign({}, date);
copy[prop] = event.target.value;
setObj(copy);
}
Данная реализация рабочая, но ее можно упростить, если воспользоваться вычисляемыми именами свойств объекта:

function handleChange(prop, event) {
setObj({...obj, ...{[prop]: event.target.value}});
}
Давайте соберем весь код вместе:

function App() {
const [obj, setObj] = useState(initObj);

function handleChange(prop, event) {
setObj({...obj, ...{[prop]: event.target.value}});
}

return <div>
<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />

<br />
{obj.prop1}-{obj.prop2}-{obj.prop3}
</div>;
}