How to update parent s state in React

Question

My structure looks as follows   Component 1     -  - Component 2    - -  - Component 4    - - -   - Component 5    Component 3   Component 3 should display some data depending on state of Component 5  Since props are immutable  I can t simply save it s state in Component 1 and forward it  right  And yes  I ve read about redux  but don t want to use it  I hope that it s possible to solve it just with react  Am I wrong

User · Answer

lt Footer    action      gt this setState  showChart  true      gt    lt footer className  row  gt       lt button type  button  onClick  this props action  gt Edit lt  button gt     console log this props    lt  footer gt   Try this example to write inline setState  it avoids creating another function

User · Answer

Most of the answers given above are for React Component based designs  If your are using useState in the recent upgrades of React library  then follow this answer

User · Answer

I found the following working solution to pass onClick function argument from child to the parent component   Version with passing a method      ChildB component class ChildB extends React Component        render              var handleToUpdate      this props handleToUpdate          return   lt div gt  lt button onClick       gt  handleToUpdate  someVar    gt              Push me            lt  button gt           lt  div gt              ParentA component class ParentA extends React Component        constructor props            super props           var handleToUpdate    this handleToUpdate bind this           var arg1                  handleToUpdate someArg               alert  We pass argument from Child to Parent      someArg               this setState  arg1 someArg               render             var handleToUpdate      this handleToUpdate           return   lt div gt                       lt ChildB handleToUpdate    handleToUpdate bind this     gt  lt  div gt            if document querySelector   demo         ReactDOM render           lt ParentA   gt           document querySelector   demo              Look at JSFIDDLE  Version with passing an Arrow function    ChildB component class ChildB extends React Component        render              var handleToUpdate      this props handleToUpdate          return   lt div gt             lt button onClick       gt  handleToUpdate  someVar    gt              Push me            lt  button gt           lt  div gt              ParentA component class ParentA extends React Component        constructor props            super props              handleToUpdate    someArg    gt                alert  We pass argument from Child to Parent      someArg              render             return   lt div gt               lt ChildB handleToUpdate    this handleToUpdate    gt  lt  div gt            if document querySelector   demo         ReactDOM render           lt ParentA   gt           document querySelector   demo              Look at JSFIDDLE

User · Answer

This is how we can do it with the new useState hook  Method - Pass the state changer function as a props to the child component and do whatever you want to do with the function import React   useState  from  react    const ParentComponent        gt      const state  setState  useState           return       lt ChildConmponent stateChanger  setState    gt          const ChildConmponent     stateChanger     rest     gt      return       lt button onClick       gt  stateChanger  New data    gt  lt  button gt

User · Answer

-We can create ParentComponent and with handleInputChange method to update the ParentComponent state  Import the ChildComponent and we pass two props from parent to child component ie handleInputChange function and count      import React    Component   from  react   import ChildComponent from    ChildComponent    class ParentComponent extends Component     constructor props        super props       this handleInputChange   this handleInputChange bind this       this state           count                    handleInputChange e        const   value  name     e target      this setState    name   value            render         const   count     this state      return          lt ChildComponent count  count  handleInputChange  this handleInputChange    gt                  Now we create the ChildComponent file and save as ChildComponent jsx  This component is stateless because the child component doesn t have a state  We use the prop-types library for props type checking   import React from  react   import   func  number   from  prop-types    const ChildComponent      handleInputChange  count      gt       lt input onChange  handleInputChange  value  count  name  count    gt      ChildComponent propTypes       count  number    handleInputChange  func isRequired      ChildComponent defaultProps       count  0      export default ChildComponent

User · Answer

When ever you require to communicate between child to parent at any level down  then it s better to make use of  context  In parent component  define the context that can be invoked by the child such as      In parent component in your case component 3   static childContextTypes             parentMethod  React PropTypes func isRequired                  getChildContext             return             parentMethod   parameter from child    gt  this parentMethod parameter from child                      parentMethod parameter from child      update the state with parameter from child        Now in child component  component 5 in your case    just tell this   component that it want to use context of its parent     static contextTypes            parentMethod  React PropTypes func isRequired         render        return         lt TouchableHighlight         onPress       gt this context parentMethod new state value            underlayColor  gray   gt                   lt Text gt  update state in parent component  lt  Text gt                        lt  TouchableHighlight gt       you can find Demo project at repo

User · Answer

As per your question  I understand that you need to display some conditional data in Component 3 which is based on state of Component 5  Approach     State of Component 3 will hold a variable to check whether Component 5 s state has that data Arrow Function which will change Component 3 s state variable  Passing arrow function to Component 5 with props  Component 5 has an arrow function which will change Component 3 s state variable Arrow function of Component 5 called on loading itself   x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  Class Component3 extends React Component       state             someData   true            checkForData    result    gt            this setState  someData   result              render             if this state someData                return                   lt Component5 hasData    this checkForData    gt                    Other Data                                  else               return                    Other Data                                   export default Component3   class Component5 extends React Component       state             dataValue    XYZ            checkForData        gt            if this state dataValue      XYZ                 this props hasData true                     else               this props hasData false                       render             return               lt div onLoad    this checkForData  gt                    Conditional Data              lt  div gt                     export default Component5  x000D   x000D   x000D

User · Answer

For child-parent communication you should pass a function setting the state from parent to child  like this   x000D   x000D  class Parent extends React Component   x000D    constructor props    x000D      super props  x000D   x000D      this handler   this handler bind this  x000D      x000D   x000D    handler     x000D      this setState   x000D        someVar   some value  x000D         x000D      x000D   x000D    render     x000D      return  lt Child handler    this handler    gt  x000D      x000D    x000D   x000D  class Child extends React Component   x000D    render     x000D      return  lt Button onClick    this props handler    gt  x000D      x000D    x000D   x000D   x000D    This way the child can update the parent s state with the call of a function passed with props   But you will have to rethink your components  structure  because as I understand components 5 and 3 are not related   One possible solution is to wrap them in a higher level component which will contain the state of both component 1 and 3  This component will set the lower level state through props

User · Answer

If this same scenario is not spread everywhere you can use React s context  specially if you don t want to introduce all the overhead that state management libraries introduce  Plus  it s easier to learn  But be careful  you could overuse it and start writing bad code  Basically you define a Container component  that will hold and keep that piece of state for you   making all the components interested in writing reading that piece of data its children  not necessarily direct children   https   reactjs org docs context html   You could also use plain React properly instead     lt Component5 onSomethingHappenedIn5  this props doSomethingAbout5    gt    pass doSomethingAbout5 up to Component 1       lt Component1 gt           lt Component2 onSomethingHappenedIn5  somethingAbout5   gt  this setState  somethingAbout5     gt           lt Component5 propThatDependsOn5  this state somethingAbout5   gt       lt Component1  gt    If this a common problem you should starting thinking moving the whole state of the application to someplace else  You have a few options  the most common are   https   redux js org    https   facebook github io flux   Basically  instead of managing the application state in your component you send commands when something happens to get the state updated  Components pull the state from this container as well so all the data is centralized  This doesn t mean can t use local state anymore  but that s a more advanced topic

User · Answer

We can set parent state from child component by passing function into child component as props as below class Parent extends React Component      state     term             onInputChange    event   gt            this setState  term  event target value                 onFormSubmit   event   gt            event preventDefault             this props onFormSubmit this state term                render             return                 lt Child onInputChange  this onInputChange  onFormSubmit                    this onFormSubmit    gt                           class Child extends React Component        render            return                 lt div className  quot search-bar ui segment quot  gt                    lt form className  quot ui form quot  onSubmit  this props onFormSubmit  gt                       lt div class  quot field quot  gt                         lt label gt Search Video lt  label gt                         lt input type  quot text quot  value  this state term  onChange                               this props onInputChange    gt                       lt  div gt                                         lt  form gt                lt  div gt                       This way child will update parent state onInputChange and onFormSubmit are props passed from parents  This can be called as and event Listeners in Child hence state will get updated there

User · Answer

I ve used a top rated answer from this page many times  but while learning React  i ve found a better way to do that  without binding and without inline function inside props   Just look here   class Parent extends React Component      constructor         super        this state         someVar  value              handleChange  someValue   gt       this setState  someVar  someValue          render         return  lt Child handler  this handleChange    gt          export const Child     handler     gt      return  lt Button onClick  handler    gt      The key is in an arrow function   handleChange  someValue   gt     this setState  someVar  someValue       You can read more here  Hope this will be useful for somebody

User · Answer

I found the following working solution to pass onClick function argument from child to the parent component with param   parent class    class Parent extends React Component   constructor props        super props          Bind the this context to the handler function     this handler   this handler bind this           Set some state     this state             messageShown  false              This method will be sent to the child component handler param1    console log param1       this setState           messageShown  true               Render the child component and set the action property with the handler as value render         return  lt Child action  this handler    gt       child class    class Child extends React Component   render         return            lt div gt                  The button will execute the handler function set by the parent component                  lt Button onClick  this props action bind this param1     gt           lt  div gt

User · Answer

I like the answer regarding passing functions around  its a very handy technique   On the flip side you can also achieve this using pub sub or using a variant  a dispatcher  as Flux does  The theory is super simple  have component 5 dispatch a message which component 3 is listening for  Component 3 then updates its state which triggers the re-render  This requires stateful components  which  depending on your viewpoint  may or may not be an anti-pattern  I m against them personally and would rather that something else is listening for dispatches and changes state from the very top-down  Redux does this  but adds additional terminology    import   Dispatcher   from flux import   Component   from React  const dispatcher   new Dispatcher       Component 3    Some methods  such as constructor  omitted for brevity class StatefulParent extends Component     state         text   foo          componentDidMount         dispatcher register  dispatch   gt          if   dispatch type      change              this setState   text   bar                          render         return  lt h1 gt   this state text   lt  h1 gt            Click handler const onClick   event   gt      dispatcher dispatch       type   change             Component 5 in your example const StatelessChild   props   gt      return  lt button onClick   onClick   gt Click me lt  button gt       The dispatcher bundles with Flux is very simple  it simply registers callbacks and invokes them when any dispatch occurs  passing through the contents on the dispatch  in the above terse example there is no payload with the dispatch  simply a message id   You could adapt this to traditional pub sub  e g  using the EventEmitter from events  or some other version  very easily if that makes more sense to you

User · Answer

I want to thank the most upvoted answer for giving me the idea of my own problem basically the variation of it with arrow function and passing param from child component    class Parent extends React Component     constructor props        super props         without bind  replaced by arrow func below        handler    val    gt        this setState         someVar  val               render         return  lt Child handler    this handler    gt         class Child extends React Component     render         return  lt Button onClick         gt  this props handler  the passing value      gt          Hope it helps someone

User · Answer

This the way I do it    type ParentProps      type ParentState     someValue  number   class Parent extends React Component lt ParentProps  ParentState gt        constructor props  ParentProps            super props          this state     someValue  0            this handleChange   this handleChange bind this             handleChange value  number            this setState     this state  someValue  value              render             return  lt div gt               lt Child changeFunction  this handleChange  defaultValue  this state someValue    gt               lt p gt Value   this state someValue  lt  p gt           lt  div gt           type ChildProps     defaultValue  number  changeFunction   value  number    gt  void  type ChildState     anotherValue  number   class Child extends React Component lt ChildProps  ChildState gt        constructor props  ChildProps            super props          this state     anotherValue  this props defaultValue            this handleChange   this handleChange bind this             handleChange value  number            this setState     this state  anotherValue  value           this props changeFunction value             render             return  lt div gt               lt input onChange  event   gt  this handleChange Number event target value    type  number  value  this state anotherValue   gt           lt  div gt

User · Answer

It seems that we can only pass data from parent to child as react promotes Unidirectional Data Flow  but to make parent update itself when something happens in its  child component   we generally use what is called a  callback function        We pass the function defined in the parent to the child as  props  and   call that function from the child triggering it in the parent   component      class Parent extends React Component     handler    Value Passed From SubChild    gt        console log  Parent got triggered when a grandchild button was clicked        console log  Parent- gt Child- gt SubChild        console log Value Passed From SubChild         render         return  lt Child handler    this handler    gt        class Child extends React Component     render         return  lt SubChild handler    this props handler    gt        class SubChild extends React Component      constructor props      super props      this state           somethingImp    1 2 3 4             render          return  lt button onClick    this props handler this state somethingImp   gt Clickme lt button  gt        React render  lt Parent   gt  document getElementById  app       HTML  ----   lt div id  app  gt  lt  div gt      In this example we can make data pass from SubChild -  Child -  Parent by passing function to its direct Child

User · Answer

so  if you want to update parent component    class ParentComponent extends React Component           constructor props               super props               this state                    page 0                                  handler val               console log val     1                    render              return                  lt ChildComponent onChange  this handler    gt                               class ChildComponent extends React Component       constructor props            super props           this state                  page 1                       someMethod    page    gt            this setState   page  page             this props onChange page             render             return           lt Button             onClick       gt  this someMethod             gt  Click          lt  Button gt                   Here onChange is an attribute with  handler  method bound to it s instance   we passed the method handler to the Child class component  to receive via onChange property in its props argument   The attribute onChange will be set in a props object like this     props    onChange   this handler     and passed to the child component  So the Child component can access the value of name in the props object like this props onChange  Its done through the use of render props   Now the Child component has a button    Click    with an onclick event set to call the handler method passed to it via onChnge in its props argument object  So now this props onChange in Child holds the output method in the Parent class Reference and credits  Bits and Pieces

[javascript] How to update parent's state in React?

Examples related to javascript

Examples related to reactjs

Examples related to web-deployment