CODEWITHSUNDEEP
javascriptreactjsundefinedthis
CodeOfPrince
CodeOfPrince

Reputation: 21

'this' on line8 is undefined, but on line 14,19,20 'this' works

class SearchBar extends React.Component {
  state = { term: "Search" };

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

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

Error

TypeError: Cannot read property 'state' of undefined onFormSubmit D:/Projects/pics/src/SearchBar.js:8 5 | 6 | onFormSubmit(event) { 7 | event.preventDefault();

8 | console.log(this.state.term); | ^ 9 | } 10 | 11 | render() {

Upvotes: 0

Views: 48

Answers (1)

Baruch Mashasha
Baruch Mashasha

Reputation: 979

You need to learn about "this" in js.

class SearchBar extends React.Component {
  state = { term: "Search" };

  onFormSubmit = (event) => {
    event.preventDefault();
    // console.log(this);
    console.log(event);
  }

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

Upvotes: 1

Related Questions