reactjs - Cannot read property 'state' of undefined solv

Question

Any help or hint would be greatly appreciated it!!

In the onFormSubmit() I get error: Cannot read property 'state' of undefined. Why does converting the onFormSubmit to an arrow function below solve the problem? In stackoverflow, the url :Cannot read property 'state' of undefined

STATED HOW TO SOLVE THE PROBLEM: As someone already mentioned, you have to bind the method in the constructor or in the onClick as he did

What does bind the method means in simple terms?

   onFormSubmit = event => {
   event.preventDefault();
   console.log(this.state.term);

}

Why does this other way also works:

 <form onSubmit={event => this.onFormSubmit(event)} className="ui form">
            <div className="field">

SearchBar.js

                import React from 'react';

            class SearchBar extends React.Component {

               state = { term: '' };


               onFormSubmit(event) {
                event.preventDefault();
                console.log(this.state.term);
               }


                render() {
                return (
                <div className="ui segment">
                    <form onSubmit={this.onFormSubmit} className="ui form">
                    <div className="field">
                        <label>Image Search</label>
                        <input type="text" value={this.state.term} onChange={(e) => this.setState({ term: e.target.value.toUpperCase()})} />
                    </div>
                    </form>

                </div>);
                }
            }

            export default SearchBar;

Answer 1

What is happening is this is undefined in onFormSubmit function why? because onFormSubmit has not been registered as SearchBar property. to solve either bind (onclick or in the constructor) or change your function into arrow function..... why arrow functions auto binds read about that in here. And also add constructor to your class and call the super() method.