Can we pass setState as props from one component to other and change parent state from child component in React?

Question

 class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.setState=this.setState.bind(this)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Child {...this}/>
      </div>
    );
  }
}

child Component
var Child=(self)=>{
  return(
    <button  onClick={()=>{
      self .setState({
        name:"viswa"
      })
    }}>Click </button>
  )

here I am binding the setState function and send this as props to child component.This will change state of parent from child.Is this proper way?

Answer 1

But this is simple than passing function.If I want change many state change. this will be simple and faster way compare to passing function right ?

The correct way to do this is as simple as yours and does not violate best practices:

class App extends Component {
  state = {
      name: 'React',
  };

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Child onClick={() => this.setState({name: 'viswa'})}/>
      </div>
    );
  }
}

const Child=({onClick})=>(
    <button onClick={onClick}>Click</button>
);

Answer 2

You shouldn't pass the setState directly, as the setState function will not change the state immediately.

as the documents said:

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

setState() does not always immediately update the component. It may batch or defer the update until later. So you'd better to manage the calling of setState function together as there may have competing of mutating parent's state. It is not recommended to pass this function to another component.

Encapsulating the calling of setState function in one class makes your code stronger.

Answer 3

As @yBrodsky said, you should rather pass down a function which does mutate the state. Here is an example:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.update=this.update.bind(this);
  }

  update(nextState) {
    this.setState(nextState);
  }

  render() {
    return (
      <Child updateParent={this.update} />
    );
  }
}

const Child = ({updateParent}) => (
  <button onClick={() => updateParent({name: 'Foo bar'})}>Click</button>
);

You now have full control over the state of the Parent in the child. Just pass the object to be shallowly merged into the parent state. In this example, name in App will change to Foo bar on button click.

Answer 4

i guess in functional components its possible to send your setState to childrens and change parent state in them but not in class base components