What s the right way to pass form element state to sibling parent elements

Question

Suppose I have a React class P  which renders two child classes  C1 and C2    C1 contains an input field  I ll refer to this input field as Foo    My goal is to let C2 react to changes in Foo      I ve come up with two solutions  but neither of them feels quite right   First solution      Assign P a state  state input  Create an onChange function in P  which takes in an event and sets state input  Pass this onChange to C1 as a props  and let C1 bind this props onChange to the onChange of Foo    This works  Whenever the value of Foo changes  it triggers a setState in P  so P will have the input to pass to C2   But it doesn t feel quite right for the same reason  I m setting the state of a parent element from a child element  This seems to betray the design principle of React  single-direction data flow  Is this how I m supposed to do it  or is there a more React-natural solution   Second solution   Just put Foo in P   But is this a design principle I should follow when I structure my app   putting all form elements in the render of the highest-level class   Like in my example  if I have a large rendering of C1  I really don t want to put the whole render of C1 to render of P just because C1 has a form element   How should I do it

User · Answer

The concept of passing data from parent to child and vice versa is explained.

_x000D_

import React, { Component } from "react";_x000D_
import ReactDOM from "react-dom";_x000D_
_x000D_
// taken refrence from https://gist.github.com/sebkouba/a5ac75153ef8d8827b98_x000D_
_x000D_
//example to show how to send value between parent and child_x000D_
_x000D_
//  props is the data which is passed to the child component from the parent component_x000D_
_x000D_
class Parent extends Component {_x000D_
  constructor(props) {_x000D_
    super(props);_x000D_
_x000D_
    this.state = {_x000D_
      fieldVal: ""_x000D_
    };_x000D_
  }_x000D_
_x000D_
  onUpdateParent = val => {_x000D_
    this.setState({_x000D_
      fieldVal: val_x000D_
    });_x000D_
  };_x000D_
_x000D_
  render() {_x000D_
    return (_x000D_
      // To achieve the child-parent communication, we can send a function_x000D_
      // as a Prop to the child component. This function should do whatever_x000D_
      // it needs to in the component e.g change the state of some property._x000D_
      //we are passing the function onUpdateParent to the child_x000D_
      <div>_x000D_
        <h2>Parent</h2>_x000D_
        Value in Parent Component State: {this.state.fieldVal}_x000D_
        <br />_x000D_
        <Child onUpdate={this.onUpdateParent} />_x000D_
        <br />_x000D_
        <OtherChild passedVal={this.state.fieldVal} />_x000D_
      </div>_x000D_
    );_x000D_
  }_x000D_
}_x000D_
_x000D_
class Child extends Component {_x000D_
  constructor(props) {_x000D_
    super(props);_x000D_
_x000D_
    this.state = {_x000D_
      fieldValChild: ""_x000D_
    };_x000D_
  }_x000D_
_x000D_
  updateValues = e => {_x000D_
    console.log(e.target.value);_x000D_
    this.props.onUpdate(e.target.value);_x000D_
    // onUpdateParent would be passed here and would result_x000D_
    // into onUpdateParent(e.target.value) as it will replace this.props.onUpdate_x000D_
    //with itself._x000D_
    this.setState({ fieldValChild: e.target.value });_x000D_
  };_x000D_
_x000D_
  render() {_x000D_
    return (_x000D_
      <div>_x000D_
        <h4>Child</h4>_x000D_
        <input_x000D_
          type="text"_x000D_
          placeholder="type here"_x000D_
          onChange={this.updateValues}_x000D_
          value={this.state.fieldVal}_x000D_
        />_x000D_
      </div>_x000D_
    );_x000D_
  }_x000D_
}_x000D_
_x000D_
class OtherChild extends Component {_x000D_
  render() {_x000D_
    return (_x000D_
      <div>_x000D_
        <h4>OtherChild</h4>_x000D_
        Value in OtherChild Props: {this.props.passedVal}_x000D_
        <h5>_x000D_
          the child can directly get the passed value from parent by this.props{" "}_x000D_
        </h5>_x000D_
      </div>_x000D_
    );_x000D_
  }_x000D_
}_x000D_
_x000D_
ReactDOM.render(<Parent />, document.getElementById("root"));

_x000D_

User · Answer

You should learn Redux and ReactRedux library It will structure your states and props in one store and you can access them later in your components

User · Answer

So  if I m understanding you correctly  your first solution is suggesting that you re keeping state in your root component  I can t speak for the creators of React  but generally  I find this to be a proper solution    Maintaining state is one of the reasons  at least I think  that React was created  If you ve ever implemented your own state pattern client side for dealing with a dynamic UI that has a lot of interdependent moving pieces  then you ll love React  because it alleviates a lot of this state management pain    By keeping state further up in the hierarchy  and updating it through eventing  your data flow is still pretty much unidirectional  you re just responding to events in the Root component  you re not really getting the data there via two way binding  you re telling the Root component that  hey  something happened down here  check out the values  or you re passing the state of some data in the child component up in order to update the state  You changed the state in C1  and you want C2 to be aware of it  so  by updating the state in the Root component and re-rendering  C2 s props are now in sync since the state was updated in the Root component and passed along   class Example extends React Component     constructor  props        super props      this state     data   test          render          return          lt div gt           lt C1 onUpdate  this onUpdate bind this    gt           lt C2 data  this state data   gt         lt  div gt              onUpdate  data    this setState   data         class C1 extends React Component       render            return            lt div gt             lt input type  text  ref  myInput   gt             lt input type  button  onClick  this update bind this   value  Update C2   gt           lt  div gt                    update            this props onUpdate this refs myInput getDOMNode   value            class C2 extends React Component       render            return  lt div gt  this props data  lt  div gt            ReactDOM renderComponent  lt Example  gt   document body

User · Answer

The first solution  with keeping the state in parent component  is the correct one  However  for more complex problems  you should think about some state management library  redux is the most popular one used with react

User · Answer

More recent answer with an example  which uses React useState  Keeping the state in the parent component is the recommended way  The parent needs to have an access to it as it manages it across two children components  Moving it to the global state  like the one managed by Redux  is not recommended for same same reason why global variable is worse than local in general in software engineering   When the state is in the parent component  the child can mutate it if the parent gives the child value and onChange handler in props  sometimes it is called value link or state link pattern   Here is how you would do it with hooks    function Parent         var  state  setState    React useState  initial input value        return  lt  gt           lt Child1 value  state  onChange   v    gt  setState v     gt           lt Child2 value  state  gt       lt   gt     function Child1 props        return  lt input         value  props value          onChange  e   gt  props onChange e target value         gt     function Child2 props        return  lt p gt Content of the state  props value  lt  p gt      The whole parent component will re-render on input change in the child  which might be not an issue if the parent component is small   fast to re-render  The re-render performance of the parent component still can be an issue in the general case  for example large forms   This is solved problem in your case  see below    State link pattern and no parent re-render are easier to implement using the 3rd party library  like Hookstate - supercharged React useState to cover variety of use cases  including your s one   Disclaimer  I am an author of the project    Here is how it would look like with Hookstate  Child1 will change the input  Child2 will react to it  Parent will hold the state but will not re-render on state change  only Child1 and Child2 will   import   useStateLink   from   hookstate core    function Parent         var state   useStateLink  initial input value        return  lt  gt           lt Child1 state  state    gt           lt Child2 state  state  gt       lt   gt     function Child1 props           to avoid parent re-render use local state         could use  props state  instead of  state  below instead     var state   useStateLink props state      return  lt input         value  state get            onChange  e   gt  state set e target value         gt     function Child2 props           to avoid parent re-render use local state         could use  props state  instead of  state  below instead     var state   useStateLink props state      return  lt p gt Content of the state  state get    lt  p gt      PS  there are many more examples here covering similar and more complicated scenarios  including deeply nested data  state validation  global state with setState hook  etc  There is also complete sample application online  which uses the Hookstate and the technique explained above

User · Answer

I m surprised that there are no answers with a straightforward idiomatic React solution at the moment I m writing  So here s the one  compare the size and complexity to others    class P extends React Component       state     foo              render            const   foo     this state           return                lt div gt                   lt C1 value   foo   onChange   x   gt  this setState   foo   x       gt                   lt C2 value   foo     gt               lt  div gt                     const C1      value  onChange      gt         lt input type  text             value   value              onChange   e   gt  onChange  e target value       gt      const C2      value      gt         lt div gt Reacting on value change    value   lt  div gt          I m setting the state of a parent element from a child element  This seems to betray the design principle of React  single-direction data flow    Any controlled input  idiomatic way of working with forms in React  updates the parent state in its onChange callback and still doesn t betray anything   Look carefully at C1 component  for instance  Do you see any significant difference in the way how C1 and built-in input component handle the state changes  You should not  because there is none  Lifting up the state and passing down value onChange pairs is idiomatic for raw React  Not usage of refs  as some answers suggest

User · Answer

Five years later with introduction of React Hooks there is now much more elegant way of doing it with use useContext hook   You define context in a global scope  export variables  objects and functions in the parent component and then wrap children in the App in a context provided and import whatever you need in child components  Below is a proof of concept   import React    useState  useContext   from  react   import ReactDOM from  react-dom   import styles from    styles css       Create context container in a global scope so it can be visible by every component const ContextContainer   React createContext null    const initialAppState       selected   Nothing      function App          The app has a state variable and update handler   const  appState  updateAppState    useState initialAppState      return        lt div gt         lt h1 gt Passing state between components lt  h1 gt                        This is a context provider  We wrap in it any children that might want to access           App s variables            In  value  you can pass as many objects  functions as you want              We wanna share appState and its handler with child components                               lt ContextContainer Provider value    appState  updateAppState    gt              Here we load some child components              lt Book title  GoT  price  10    gt           lt DebugNotice   gt         lt  ContextContainer Provider gt       lt  div gt             Child component Book function Book props         Inside the child component you can import whatever the context provider allows       Earlier we passed value    appState  updateAppState         In this child we need the appState and the update handler   const   appState  updateAppState     useContext ContextContainer      function handleCommentChange e          Here on button click we call updateAppState as we would normally do in the App        It adds updates comment property with input value to the appState     updateAppState      appState  comment  e target value            return        lt div className  book  gt         lt h2 gt  props title  lt  h2 gt         lt p gt   props price  lt  p gt         lt input         type  text            Controlled Component  Value is reverse vound the value of the variable in state         value  appState comment          onChange  handleCommentChange          gt         lt br   gt         lt button         type  button             Here on button click we call updateAppState as we would normally do in the app         onClick       gt  updateAppState      appState  selected  props title            gt          Select This Book        lt  button gt       lt  div gt             Just another child component function DebugNotice          Inside the child component you can import whatever the context provider allows       Earlier we passed value    appState  updateAppState         but in this child we only need the appState to display its value   const   appState     useContext ContextContainer         Here we pretty print the current state of the appState       return        lt div className  state  gt         lt h2 gt appState lt  h2 gt         lt pre gt  JSON stringify appState  null  2   lt  pre gt       lt  div gt          const rootElement   document body  ReactDOM render  lt App   gt   rootElement     You can run this example in the Code Sandbox editor

User · Answer

The right thing to do is to have the state in the parent component  to avoid ref and what not An issue is to avoid constantly updating all children when typing into a field Therefore  each child should be a Component  as in not a PureComponent  and implement shouldComponentUpdate nextProps  nextState  This way  when typing into a form field  only that field updates   The code below uses  bound annotations from ES Next babel-plugin-transform-decorators-legacy of BabelJS 6 and class-properties  the annotation  sets this value on member functions similar to bind          2017-present Harald Rudell  lt harald rudell gmail com gt   http   www haraldrudell com  All rights reserved     import React   Component  from  react  import  bound  from  class-bind   const m    Form   export default class Parent extends Component     state    one   One   two   Two       bound submit e        e preventDefault       const values       this state      console log    m  submit    values          bound fieldUpdate  name  value         this setState   name   value          render         console log    m  render       const  state  fieldUpdate  submit    this     const p    fieldUpdate      return          lt form onSubmit  submit  gt      loop removed for clarity              lt Child name  one  value  state one      p    gt           lt Child name  two  value  state two      p    gt           lt input type  submit    gt         lt  form gt               class Child extends Component     value   this props value     bound update e        const  value    e target     const  name  fieldUpdate    this props     fieldUpdate  name  value          shouldComponentUpdate nextProps        const  value    nextProps     const doRender   value     this value     if  doRender  this value   value     return doRender        render         console log  Child  this props name  render       const  value    this props     const p    value      return  lt input     p  onChange  this update    gt

User · Answer

With React    16 3  you can use ref and forwardRef  to gain access to child s DOM from its parent  Don t use old way of refs anymore   Here is the example using your case    import React    Component   from  react    export default class P extends React Component      constructor  props          super props        this state    data   test          this onUpdate   this onUpdate bind this        this ref   React createRef             onUpdate data          this setState  data   this ref current value             render            return            lt div gt              lt C1 ref  this ref  onUpdate  this onUpdate   gt              lt C2 data  this state data   gt           lt  div gt                  const C1   React forwardRef  props  ref    gt         lt div gt           lt input type  text  ref  ref  onChange  props onUpdate    gt       lt  div gt       class C2 extends React Component       render             return  lt div gt C2 reacts    this props data  lt  div gt            See Refs and ForwardRef for detailed info about refs and forwardRef

User · Answer

Having used React to build an app now  I d like to share some thoughts to this question I asked half a year ago   I recommend you to read   Thinking in React Flux   The first post is extremely helpful to understanding how you should structure your React app    Flux answers the question why should you structure your React app this way  as opposed to how to structure it   React is only 50  of the system  and with Flux you get to see the whole picture and see how they constitute a coherent system    Back to the question   As for my first solution  it is totally OK to let the handler go the reverse direction  as the data is still going single-direction   However  whether letting a handler trigger a setState in P can be right or wrong depending on your situation   If the app is a simple Markdown converter  C1 being the raw input and C2 being the HTML output  it s OK to let C1 trigger a setState in P  but some might argue this is not the recommended way to do it   However  if the app is a todo list  C1 being the input for creating a new todo  C2 the todo list in HTML  you probably want to handler to go two level up than P -- to the dispatcher  which let the store update the data store  which then send the data to P and populate the views  See that Flux article  Here is an example  Flux - TodoMVC  Generally  I prefer the way described in the todo list example  The less state you have in your app the better

[reactjs] What's the right way to pass form element state to sibling/parent elements?

Examples related to reactjs