import React, {Component} from 'react';
export default class App2 extends Component {
constructor() {
super();
this.state = {items: [1, 2, 3, 4, 5], value: ''};
}
//Добавляем в конец списка новый пункт:
addItem(event) {
//Добавляем новый элемент в массив:
this.state.items.push(this.state.value);
//Применяем изменение:
this.setState({items: this.state.items});
//Отменяем отправку формы:
event.preventDefault();
}
//Записываем value инпута в this.state.value:
handleChange(event) {
this.setState({value: event.target.value});
}
removeItem(id){
this.setState(({items}) => {
const index = items.findIndex(elem =>
elem.id === id);
const newArr = [...items.slice(0, index), ...items.slice(index + 1)];
return {
items: newArr
}
});
}
render() {
//Формируем набор из тегов li:
const list =
this.state.items.map((item, index) => {
return (
<>
<li key={index}>{item}</li>
<li key={index}><button onClick={this.removeItem.bind(this)}>Remove</button></li>
</>
);
});
//По нажатию на кнопку вызываем addItem:
return (
<div>
<ul>
{list}
</ul>
<form onSubmit={this.addItem.bind(this)}>
<input
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
<input type="submit" />
</form>
</div>
);
}
}