Invoervelden binden aan een object in React

Stel dat er een object in de state wordt opgeslagen:

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

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

Laten we elke eigenschap van ons object weergeven in een apart invoerveld:

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

Laten we nu aan elk invoerveld het gebeurtenis onChange binden. We wijzen één gemeenschappelijke functie toe als handler:

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

Zoals je ziet, accepteert de functie handleChange als eerste parameter de naam van de corresponderende eigenschap van het object.

Laten we de implementatie van onze functie schrijven:

function handleChange(prop, event) {
	const copy = Object.assign({}, obj);
	copy[prop] = event.target.value;
	setObj(copy);
}

Deze implementatie werkt, maar kan worden vereenvoudigd door gebruik te maken van berekende namen van objecteigenschappen:

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

Laten we alle code samenvoegen:

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

Stel dat er een object met een datum in de state wordt opgeslagen:

const initDate = {
	year:  2025,
	month: 12,
	day:   31,
}

Toon in een alinea het jaar, de maand en de dag uit de datum die in de state is opgeslagen, evenals de weekdag die daarbij hoort.

Pas de vorige opdracht aan door drie invoervelden toe te voegen voor het bewerken van de datum.