React - _this2.SetState is not a function

Question

I'm trying to create a component that will print out input text to the screen, here is what I'm working on.

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

However I keep getting an error in Chrome console:

bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function

Any ideas?

Thanks

Possible duplicate of [Unable to access React instance (this) inside event handler](http://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler) — vijayst, Sep 26 '16 at 14:09

score 10 · Accepted Answer · answered Sep 26 '16 at 14:19

Try this:

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { term: '' };
    this.setInputState = this.setInputState.bind(this);
  }
  
  setInputState(event) {
    this.setState({ term: event.target.value });
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={this.setInputState} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

score 3 · Answer 2 · answered Sep 26 '16 at 14:08

you have to bind {event => this.SetState(event.target.value)} function to component this. problem is your onChange function not running your component this context

code should look something like this

const onChange = (event) => { this.setState({term:event.target.value}) }

 <input value={this.state.term} onChange={onChange.bind(this) />

Chris Hawkes · Answer 3 · 2016-09-26T14:07:59.083

2

I think you need to bind your this, try this (no pun intended).

 render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.setState.bind(this, event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }

edited Sep 26 '16 at 14:07

answered Sep 26 '16 at 14:05

Chris Hawkes

11,923
6
58
68

2

Also, shouldn't it be `setState`? Notice the caps – Andrew Li Sep 26 '16 at 14:07
yes that's a problem too, i just copied and pasted what he had. – Chris Hawkes Sep 26 '16 at 14:07

score 0 · Answer 4 · edited Mar 22 '18 at 10:34

0

I believe you had to specify what was changed in the state:

this.setState({ term: event.target.value });

instead of

this.setState( event.target.value );

edited Mar 22 '18 at 10:34

MD Aslam Ansari

1,565
11
19

answered Jan 13 '17 at 17:05

khelll

23,590
15
91
109

score 0 · Answer 5 · answered Jul 17 '18 at 06:49

Try this code:

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.setState({term:event.target.value})} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

score 0 · Answer 6 · answered Jul 29 '18 at 18:07

This worked for me. I think you missed out on the state key name term and also this SetState, which should be setState. Just follow my example below am sure it will work for you also.

class Square extends React.Component {

constructor(props){
    super(props)
    this.state = {
        value: null
    };
}

render() {
  return (
  <button 
      className="square"  
      onClick={()=> this.setState({value:'X'})}>

    {this.state.value}

  </button>
  );
}


}

score 0 · Answer 7 · edited Nov 06 '18 at 16:22

0

 class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

you wrote SetState instead of

edited Nov 06 '18 at 16:22

fewlinesofcode

3,007
1
13
30

answered Nov 06 '18 at 15:34

MUHAMMAD SARIM

1

3

`SetState` Instead of what? – fewlinesofcode Nov 06 '18 at 15:38

score 0 · Answer 8 · answered Apr 23 '19 at 05:17

0

I faced a similar problem and noticed that I was using this.state.setState() method instead of this.setState().

Although OP's problem is the wrong capitalization.

answered Apr 23 '19 at 05:17

atulkhatri

10,896
3
53
89

React - _this2.SetState is not a function

8 Answers8

Linked