React-redux: this.setState is not working

Question

I am working on a project which is written in react-redux. I want to use the component state in component rather than global state.
My component code is:

import React from 'react';
import Input from 'src/containers/Input';
type StateType = {
     searchChannel: string
};
export default class AddChannelComponent extends React.Component < void,
PropsType,
void > {
     state : StateType;

     constructor(props : PropsType) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler(value) {
          console.log("text  isdddd", value);
          this.setState({searchChannel: value});  <==Error Occur Here
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}

inputHandler function is invoked by the child component. Inside this this.setState({searchChannel: value}) gives me error that this.setState is not a function. Although I assign a test value to the searchChannel in constructor and it's working when I console its value in render.

Possible duplicate of [this.setState is undefined](https://stackoverflow.com/questions/39210971/this-setstate-is-undefined) — ivarni, Aug 03 '17 at 11:14
TL;DR: You need to bind `inputHandler` to your component using any of the approaches suggested in the accepted answer above — ivarni, Aug 03 '17 at 11:14

score 3 · Accepted Answer · edited Aug 03 '17 at 11:38

3

My correction would be like this

import React from 'react';
import Input from 'src/containers/Input';

export default class AddChannelComponent extends React.Component{

     constructor(props) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler = (value) => {
          console.log("text is dddd", value);
          this.setState({searchChannel: value});
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}

Reason

If you pass an instance method (which refers to a specific context aka, accessing to this) you will lose its original context, because it depends on the caller.

Further info here: How to access the correct `this` inside a callback?

eg: inputHandler={this.inputHandler}

to keep the this you can:

use bound functions inputHandler={this.inputHandler.bind(this)}
use arrow functions inputHandler={(...args) => this.inputHandler(...args)}
use Class Fields (not-standard-yet) imputHandler = () => {}

edited Aug 03 '17 at 11:38

Hitmands

13,491
4
34
69

answered Aug 03 '17 at 11:14

Hana Alaydrus

2,225
16
19

It's working for me. But can you tell why this is happening. – Pulkit Aggarwal Aug 03 '17 at 11:16
1

converted to a member property and arrow function, keeping the context, hence binding to instance. – Dimitar Christoff Aug 03 '17 at 11:19
@Kelltontech oh and you actually don't need to declare state type – Hana Alaydrus Aug 03 '17 at 11:30
@HanaAlaydrus This is project by my senior and this is working properly. – Pulkit Aggarwal Aug 03 '17 at 11:30
@Kelltontech so it's working before? then I guess the main problem is about the binding thing. reference about binding : https://facebook.github.io/react/docs/handling-events.html – Hana Alaydrus Aug 03 '17 at 11:35

score 0 · Answer 2 · edited Jan 09 '18 at 15:50

import React from 'react';
import Input from 'src/containers/Input';

export default class AddChannelComponent extends React.Component{

     constructor(props) {
          super(props);
          this.state = {
               searchChannel: 'test'
          };
     }

     inputHandler = (value) => {
          console.log("text is dddd", value);
          this.setState({searchChannel: value});
     }
     render() {
          return (
               <div >
                    <p>Type your input</p>
                    <div>
                         <Input inputHandler={this.inputHandler.bind(this)} placeholder="Search all public channels..."/>
                    </div>
               </div>
          );
     }
}

React-redux: this.setState is not working

2 Answers2

Reason