How to access child s state in React

Question

I have the following structure   FormEditor - holds multiple FieldEditor FieldEditor - edits a field of the form and saving various values about it in it s state  When a button is clicked within FormEditor  I want to be able to collect information about the fields from all FieldEditor components  information that s in their state  and have it all within FormEditor   I considered storing the information about the fields outside of FieldEditor s state and put it in FormEditor s state instead  However  that would require FormEditor to listen to each of it s FieldEditor components as they change and store their information in it s state   Can t I just access the children s state instead  Is it ideal

User · Answer

As the previous answers saids  try to move the state to a top component and modify the state through callbacks passed to it s children    In case that you really need to access to a child state that is declared as a functional component  hooks  you can declare a ref in the parent component  then pass it as a ref attribute to the child but you need to use React forwardRef and then the hook useImperativeHandle to declare a function you can call in the parent component    Take a look at the following example   const Parent        gt        const myRef   useRef        return  lt Child ref  myRef    gt      const Child   React forwardRef  props  ref    gt        const  myState  setMyState    useState  This is my state         useImperativeHandle ref       gt    getMyState       gt   return myState      myState         Then you should be able to get myState in the Parent component by calling  myRef current getMyState

User · Answer

Now You can access the InputField s state which is the child of FormEditor     Basically whenever there is a change in the state of the input field child  we are getting the value from the event object and then passing this value to the Parent where in the state in the Parent is set   On button click we are just printing the state of the Input fields   The key point here is that we are using the props to get the Input Field s id value and also to call the functions which are set as attributes on the Input Field while we generate the reusable child Input fields   class InputField extends React Component    handleChange    event   gt        const val   event target value      this props onChange this props id   val          render         return         lt div gt           lt input type  text  onChange  this handleChange  value  this props value   gt           lt br  gt  lt br  gt         lt  div gt                        class FormEditorParent extends React Component     state         handleFieldChange    inputFieldId   inputFieldValue    gt        this setState   inputFieldId  inputFieldValue            on Button click simply get the state of the input field   handleClick       gt       console log JSON stringify this state           render         const fields   this props fields map field   gt           lt InputField         key  field          id  field          onChange  this handleFieldChange          value  this state field           gt               return          lt div gt           lt div gt             lt button onClick  this handleClick  gt Click Me lt  button gt           lt  div gt           lt div gt             fields           lt  div gt         lt  div gt                const App        gt      const fields     field1    field2    anotherField      return  lt FormEditorParent fields  fields    gt       ReactDOM render  lt App  gt   mountNode

User · Answer

Its 2020 and lots of you will come here looking for a similar solution but with Hooks   They are great    and with latest approaches in terms of code cleanliness and syntax   So as previous answers had stated  the best approach to this kind of problem is to hold the state outside of child component fieldEditor  You could do that in multiple ways   The most  complex  is with  global context  state  that both parent and children could access and modify  Its a great solution when components are very deep in the tree hierarchy and so its costly to send props in each level   In this case I think its not worth it  and more simple approach will bring us the results we want  just using the powerful React useState     Approach with React useState   hook  way simpler than with Class components  As said we will deal with changes and store the data of our child component fieldEditor in our parent fieldForm  To do that we will send a reference to the function that will deal and apply the changes to the fieldForm state  you could do that with   function FieldForm   fields        const  fieldsValues  setFieldsValues    React useState        const handleChange    event  fieldId    gt        let newFields        fieldsValues        newFields fieldId    event target value       setFieldsValues newFields           return        lt div gt         fields map field   gt             lt FieldEditor           key  field            id  field            handleChange  handleChange            value  fieldsValues field             gt                   lt div gt  JSON stringify fieldsValues   lt  div gt       lt  div gt           Note that React useState     will return an array with position 0 being the value specified on call  Empty object in this case   and position 1 being the reference to the function that modifies the value   Now with the child component  FieldEditor  you don t even need to create a function with a return statement  a lean constant with an arrow function will do   const FieldEditor      id  value  handleChange      gt       lt div className  field-editor  gt       lt input onChange  event   gt  handleChange event  id   value  value    gt     lt  div gt       Aaaaand we are done  nothing more  with just these two slime functional components we have our end goal  access  our child FieldEditor value and show it off in our parent   You could check the accepted answer from 5 years ago and see how Hooks made React code leaner  By a lot     Hope my answer helps you learn and understand more about Hooks  and if you want to check a working example here it is

User · Answer

Just before I go into detail about how you can access the state of a child component  please make sure to read Markus-ipse s answer regarding a better solution to handle this particular scenario   If you do indeed wish to access the state of a component s children  you can assign a property called ref to each child  There are now two ways to implement references  Using React createRef   and callback refs   Using React createRef    This is currently the recommended way to use references as of React 16 3  See the docs for more info   If you re using an earlier version then see below regarding callback references   You ll need to create a new reference in the constructor of your parent component and then assign it to a child via the ref attribute   class FormEditor extends React Component     constructor props        super props       this FieldEditor1   React createRef          render         return  lt FieldEditor ref  this FieldEditor1    gt           In order to access this kind of ref  you ll need to use   const currentFieldEditor1   this FieldEditor1 current    This will return an instance of the mounted component so you can then use currentFieldEditor1 state to access the state   Just a quick note to say that if you use these references on a DOM node instead of a component  e g   lt div ref  this divRef    gt   then this divRef current will return the underlying DOM element instead of a component instance   Callback Refs  This property takes a callback function that is passed a reference to the attached component  This callback is executed immediately after the component is mounted or unmounted   For example    lt FieldEditor     ref   fieldEditor1    gt   this fieldEditor1   fieldEditor1           props    gt    In these examples the reference is stored on the parent component  To call this component in your code  you can use   this fieldEditor1   and then use this fieldEditor1 state to get the state   One thing to note  make sure your child component has rendered before you try to access it      As above  if you use these references on a DOM node instead of a component  e g   lt div ref   divRef    gt   this myDiv   divRef      gt   then this divRef will return the underlying DOM element instead of a component instance   Further Information  If you want to read more about React s ref property  check out this page from Facebook   Make sure you read the  Don t Overuse Refs  section that says that you shouldn t use the child s state to  make things happen    Hope this helps      Edit  Added React createRef   method for creating refs  Removed ES5 code

User · Answer

If you already have onChange handler for the individual FieldEditors I don t see why you couldn t just move the state up to the FormEditor component and just pass down a callback from there to the FieldEditors that will update the parent state  That seems like a more React-y way to do it  to me   Something along the line of this perhaps   const FieldEditor      value  onChange  id      gt      const handleChange   event   gt        const text   event target value      onChange id  text           return        lt div className  field-editor  gt         lt input onChange  handleChange  value  value    gt       lt  div gt           const FormEditor   props   gt      const  values  setValues    useState        const handleFieldChange    fieldId  value    gt        setValues      values   fieldId   value             const fields   props fields map field   gt         lt FieldEditor       key  field        id  field        onChange  handleFieldChange        value  values field         gt           return        lt div gt         fields         lt pre gt  JSON stringify values  null  2   lt  pre gt       lt  div gt              To add abillity to dynamically add remove fields keep the list in state const App        gt      const fields     field1    field2    anotherField       return  lt FormEditor fields  fields    gt        Original - pre-hooks version   x000D   x000D  class FieldEditor extends React Component   x000D    constructor props    x000D      super props   x000D      this handleChange   this handleChange bind this   x000D      x000D   x000D    handleChange event    x000D      const text   event target value  x000D      this props onChange this props id  text   x000D      x000D   x000D    render     x000D      return   x000D         lt div className  field-editor  gt  x000D           lt input onChange  this handleChange  value  this props value    gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  class FormEditor extends React Component   x000D    constructor props    x000D      super props   x000D      this state       x000D   x000D      this handleFieldChange   this handleFieldChange bind this   x000D      x000D   x000D    handleFieldChange fieldId  value    x000D      this setState    fieldId   value     x000D      x000D   x000D    render     x000D      const fields   this props fields map field   gt    x000D         lt FieldEditor x000D          key  field  x000D          id  field  x000D          onChange  this handleFieldChange  x000D          value  this state field   x000D          gt  x000D          x000D   x000D      return   x000D         lt div gt  x000D           fields  x000D           lt div gt  JSON stringify this state   lt  div gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D     Convert to class component and add ability to dynamically add remove fields by having it in state x000D  const App        gt    x000D    const fields     field1    field2    anotherField    x000D   x000D    return  lt FormEditor fields  fields    gt   x000D     x000D   x000D  ReactDOM render  lt App   gt   document body   x000D   x000D   x000D

[javascript] How to access child's state in React?

Examples related to javascript

Examples related to reactjs