CODEWITHSUNDEEP
reactjs
Deano
Deano

Reputation: 12230

React - _this2.SetState is not a function

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

Upvotes: 8

Views: 27488

Answers (8)

atulkhatri
atulkhatri

Reputation: 11343

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.

Upvotes: 0

MUHAMMAD SARIM
MUHAMMAD SARIM

Reputation: 1

 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

Upvotes: 0

Jeff C
Jeff C

Reputation: 369

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>
  );
}


}

Upvotes: 0

Vikram Biwal
Vikram Biwal

Reputation: 2826

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>
    );
  }
}

Upvotes: 0

khelll
khelll

Reputation: 24020

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 );

Upvotes: 0

Samu
Samu

Reputation: 1448

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>
    );
  }
}

Upvotes: 10

Balaji Thummalapenta
Balaji Thummalapenta

Reputation: 131

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) />

Upvotes: 3

Chris Hawkes
Chris Hawkes

Reputation: 12430

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>
    );
  }

Upvotes: 2

Related Questions