Accepted answer

It should look like this:

<input className="form-control" value={this.state.sentence} onChange={this.onChange}/>
<button type="button" onClick={this.onClick}></button>

You bound handleSentence method to this.onClick. That was wrong.


The best practise is to keep the function name same when you are binding. It avoids unnecessary confusion as in your case. You had done binding of handleSentence function by a different name but were still calling it by the same name so in your case the function was being called but since it was bound by a different name it did not refer to the correct context, where state is present.

class SentenceForm extends Component {
    constructor(props) {
        this.state = {
            sentence: '',
        this.onChange = this.onChange.bind(this);
        this.handleSentence = this.handleSentence.bind(this);

Related Query

More Query from same tag