Why is my react form not working on codesandbox

Question

I created a simple form here https://codesandbox.io/s/xenodochial-frog-7squw

It says You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue.

But there is an onChange handler being passed, so I don't understand. In addition the page reloads when I hit submit, even though preventDefault() is called

Thank you

Answer 1

The issue is this line:

const { str, handleChange, handleSubmit } = this.state;

handleChange and handleSubmit are not part of the state, but are instance methods, so you can pass them like so:

    return (
      <div className="App">
        <Form str={str} onChange={this.handleChange} onSubmit={this.handleSubmit} />
        <Table />
      </div>
    );