Почему возникает ошибка при удалении записи из todo?

Question

[embiid]

Родитель с функцией удаления:

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      items: [],
      currentItem: {
        text: '',
        key: '',
      }
    }

    this.addItem = this.addItem.bind(this)
    this.deleteItem = this.addItem.bind(this)
    this.handleInput = this.handleInput.bind(this)
  }

deleteItem(key) {
    const filteredItems= this.state.items.filter(item => item.key !== key)
    this.setState({
      items: filteredItems
    })
  }
render() {
    return (
      <div className="App">
        <header>
          <form id="goalForm">
            <input type="text" placeholder="Enter your main goal"
                   value={ this.state.currentItem.text }
                   onChange={ this.handleInput }>
            </input>
            <button type="submit" onClick={ this.addItem }>Add</button>
          </form>
        </header>

        <ListItems items      = { this.state.items }
                   deleteItem = { this.deleteItem }
        />
      </div>
    )

Ну и сами перечисления "задач":

function ListItems(props) {
    const items = props.items
    const listItems = items.map(item => {
        return (
            <div className="list" key = { item.key }>
                <div className="goal">
                    <p>{ item.text }</p>
                    <span>
                        <FontAwesomeIcon className="faicons" icon={ faTrash }
                            onClick={() => {
                                    props.deleteItem(item.key)
                                }
                            }
                        />
                    </span>
                </div>
            </div>
        )
    })

    return (
        <div>{ listItems }</div>
    )
}

Получаю ошибку, типо такого:

Answer 1

[0xD34F]

this.deleteItem = this.addItem.bind(this)

Так add или delete? Вы уж определитесь.

А ещё лучше - используйте при объявлении методов синтаксис стрелочных функций, и тогда вручную привязывать контекст будет не надо:

class App extends React.Component {
  addItem = e => {
    ...
  }

  deleteItem = key => {
    ...
  }
  ...

Answer 2

[Stockholm Syndrome]

опечатка

this.deleteItem = this.deleteItem.bind(this)
вместо
this.deleteItem = this.addItem.bind(this)