bobrui4anin

class App extends React.Component {
  state = {
    items: [...this.props.items.map((n, i) => ({
      id: i + 1,
      value: n,
    }))],
    newItem: '',
    search: '',
  }

  addItem = () => {
    this.setState(({ items, newItem }) => ({
      items: [ ...items, {
        id: 1 + Math.max(0, ...items.map(n => n.id)),
        value: newItem,
      } ],
      newItem: '',
    }));
  }

  deleteItem(id) {
    this.setState(({ items }) => ({
      items: items.filter(n => n.id !== id),
    }));
  }

  onChange = ({ target: { value, name } }) => {
    this.setState(() => ({
      [name]: value,
    }));
  }

  render() {
    const search = this.state.search.toLowerCase();
    const filteredItems = this.state.items.filter(n => n.value.toLowerCase().includes(search));

    return (
      <div>
        <div>
          <input
            value={this.state.newItem}
            onChange={this.onChange}
            name="newItem"
            placeholder="Add..."
          />
          <button onClick={this.addItem}>Добавить</button>
        </div>
        <div>
          <input
            value={this.state.search}
            onChange={this.onChange}
            name="search"
            placeholder="Search..."
          />
        </div>
        <ul>
          {filteredItems.map(n => (
            <li key={n.id}>
              {n.value}
              <button onClick={() => this.deleteItem(n.id)}>Удалить</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <App
    items={[
      'hello, world!!',
      'fuck the world',
      'fuck everything',
    ]}
  />,
  document.getElementById('app')
);