Имеется некоторое состояние state компонента:
constructor() {
super();
UniqueID.enableUniqueIds(this);
this.state = {
users: [
{id: this.nextUniqueId(), name: 'john', age: 20},
{id: this.nextUniqueId(), name: 'peter', age: 30},
{id: this.nextUniqueId(), name: 'jill', age: 25}
]
}
console.log(this.state)
}
Также имеется два инпута: первый input с именем name, второй - с age.
Необходимо при событии onClick кнопки добавлять в уже существующий массив объектов users новый объект с нашими name и age.
addEvent = () => {
this.setState(previousState => ({
users: [...previousState.users, {id: this.nextUniqueId, name: '', age: ''}]
}));
}
render() {
return (
<div className="App">
<div>
<input
className='test-input'
placeholder = 'insert name'
/>
<input
className='test-input'
placeholder = 'insert age'
/>
<button
onClick={this.addEvent}>
Add obj
</button>
</div>
</div>
)}
Не могу понять, как связать инпуты и мой обработчик событий.