Question: So have an input field:

```
<input
  id={itemId}
  onChange={handleChange}
  type="number"
  value={packed}
/>

```

And here is my onChange function:

```
  handleChange(e) {
    const { items, onUpdateQuantity } = this.props;
    const updateItem = items.filter((item) =>
      item.itemId === e.target.id,
    );

    const itemQuantity = toNumber(e.target.value);
    updateItem.total += itemQuantity;
    onUpdateQuantity(e.target.id, itemQuantity);
  }

```

So why is React still complaining about an onChange handler not being defined when it already is? I don't want to add a `defaultValue` prop, as that causes bugs in my app. Any ideas?

Answer: 
That is coming because your `value` is not changing anywhere. As you can see from [docs for controlled components](https://reactjs.org/docs/forms.html#controlled-components), the value of the `input` is `this.state.value` and the `onChange` method changes the value inside the `input` by changing `this.state.value`.

As far as I can see, when you input a value inside the `input` (`<input/>`) element, the value of that element is not changing. It is always whatever the value of `packed` is. That is why you're getting the error.
<https://reactjs.org/docs/handling-events.html>

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

Don't forget to use this.handleChange in you JSX

Example:

```
    class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

```