How to pass data from child component to its parent in ReactJS

Question

I m trying to send data from a child component to it s parent as follow   const ParentComponent   React createClass       getInitialState             return               language                            handleLanguageCode  function langValue            this setState  language  langValue                render              return                    lt div className  col-sm-9   gt                       lt SelectLanguage onSelectLanguage  this handleLanguage   gt                    lt  div gt                   and here is the child component   export const SelectLanguage   React createClass       getInitialState  function            return              selectedCode                  selectedLanguage                             handleLangChange  function  e            var lang   this state selectedLanguage          var code   this state selectedCode          this props onSelectLanguage  selectedLanguage  lang               this props onSelectLanguage  selectedCode  code                           render             var json   require  json    languages json            var jsonArray   json languages          return                lt div  gt                   lt DropdownList ref  dropdown                      data  jsonArray                       value  this state selectedLanguage                      caseSensitive  false                       minLength  3                      filter  contains                      onChange  this handleLangChange    gt               lt  div gt                                     What I need is to get the selected value by user in the parent component  I m getting this error   Uncaught TypeError  this props onSelectLanguage is not a function   Can anyone help me to find the problem    P S  The child component is creating a dropdown from a json file  and I need the dropdown list to show both elements of the json array next to each other like   aaa english  as the first choice             languages                          aaa             english                               aab             swedish

User · Answer

To pass data from child component to parent component  In Parent Component    getData val          do not forget to bind getData in constructor     console log val     render     return  lt Child sendData  this getData   gt        In Child Component    demoMethod       this props sendData value

User · Answer

This should work  While sending the prop back you are sending that as an object rather send that as a value or alternatively use it as an object in the parent component  Secondly you need to format your json object to contain name value pairs and use valueField and textField attribute of DropdownList  Short Answer  Parent     lt div className  col-sm-9  gt        lt SelectLanguage onSelectLanguage  this handleLanguage    gt    lt  div gt    Child   handleLangChange        gt        var lang   this dropdown value      this props onSelectLanguage lang                     Detailed   EDIT   Considering React createClass is deprecated from v16 0 onwards  It is better to go ahead and create a React Component by extending React Component  Passing data from child to parent component with this syntax will look like  Parent  class ParentComponent extends React Component        state     language            handleLanguage    langValue    gt            this setState  language  langValue               render              return                    lt div className  col-sm-9  gt                       lt SelectLanguage onSelectLanguage  this handleLanguage    gt                    lt  div gt                       Child  var json   require  json    languages json    var jsonArray   json languages   export class SelectLanguage extends React Component       state                 selectedCode                  selectedLanguage  jsonArray 0                  handleLangChange        gt            var lang   this dropdown value          this props onSelectLanguage lang                          render             return                lt div gt                   lt DropdownList ref   ref    gt  this dropdown   ref                      data  jsonArray                       valueField  lang  textField  lang                      caseSensitive  false                       minLength  3                      filter  contains                      onChange  this handleLangChange    gt               lt  div gt                                     Using createClass syntax which the OP used in his answer Parent  const ParentComponent   React createClass       getInitialState             return               language                             handleLanguage  function langValue            this setState  language  langValue                render              return                    lt div className  col-sm-9  gt                       lt SelectLanguage onSelectLanguage  this handleLanguage    gt                    lt  div gt                   Child  var json   require  json    languages json    var jsonArray   json languages   export const SelectLanguage   React createClass       getInitialState  function             return               selectedCode                  selectedLanguage  jsonArray 0                          handleLangChange  function              var lang   this refs dropdown value          this props onSelectLanguage lang                           render              return                lt div gt                   lt DropdownList ref  dropdown                      data  jsonArray                       valueField  lang  textField  lang                      caseSensitive  false                       minLength  3                      filter  contains                      onChange  this handleLangChange    gt               lt  div gt                                     JSON       languages                  code    aaa         lang    english                       code    aab         lang    Swedish

User · Answer

I found the approach how to get data from child component in parents when i need it   Parent   class ParentComponent extends Component    onSubmit data        let mapPoint   this getMapPoint           render        return          lt form onSubmit  this onSubmit bind this   gt           lt ChildComponent getCurrentPoint  getMapPoint   gt   this getMapPoint   getMapPoint     gt           lt input type  submit  value  Submit    gt         lt  form gt                Child   class ChildComponent extends Component    constructor props       super props        if  props getCurrentPoint         props getCurrentPoint this getMapPoint bind this                 getMapPoint        return this Point          This example showing how to pass function from child component to parent and use this function to get data from child

User · Answer

You can create the state in the ParentComponent using useState and pass down the setIsParentData function as prop into the ChildComponent  In the ChildComponent  update the data using the received function through prop to send the data back to ParentComponent  I use this technique especially when my code in the ParentComponent is getting too long  therefore I will create child components from the ParentComponent  Typically  it will be only 1 level down and using useContext or redux seems overkill in order to share states between components  ParentComponent js import React    useState   from  react   import ChildComponent from    ChildComponent    export function ParentComponent      const  isParentData  setIsParentData    useState True      return        lt p gt is this a parent data    isParentData  lt  p gt       lt ChildComponent toChild  isParentData  sendToParent  setIsParentData    gt          ChildComponent js import React from  react    export function ChildComponent props      return        lt button onClick       gt   props sendToParent False    gt Update lt  button gt       lt p gt The state of isParentData is  props toChild  lt  p gt

User · Answer

Best way to pass data from child to parent component child component handleLanguageCode     gt  langValue      this props sendDatatoParent langValue     Parent  lt Parent sendDatatoParent   data   gt  this setState  item  data       gt

User · Answer

Considering React Function Components and using Hooks are getting more popular these days   I will give a simple example of how to Passing data from child to parent component  in Parent Function Component we will have    import React    useState  useEffect   from  react     then  const  childData  setChildData    useState        and passing setChildData  which do a job similar to this setState in Class Components  to Child   return   lt ChildComponent passChildData  setChildData    gt      in Child Component first we get the receiving props  function ChildComponent props   return           then you can pass data anyhow like using a handler function  const functionHandler    data    gt     props passChildData data

User · Answer

React createClass method has been deprecated in the new version of React  you can do it very simply in the following way make one functional component and another class component to maintain state   Parent    x000D   x000D  const ParentComp        gt    x000D     x000D    getLanguage    language    gt    x000D      console log  Language in Parent Component     language   x000D      x000D     x000D     lt ChildComp onGetLanguage  getLanguage  x000D     x000D   x000D   x000D    Child    x000D   x000D  class ChildComp extends React Component   x000D      state     x000D        selectedLanguage     x000D        x000D       x000D      handleLangChange   e   gt    x000D          const language   e target value  x000D          thi setState   x000D            selectedLanguage   language  x000D              x000D          this props onGetLanguage  language     x000D        x000D   x000D      render     x000D          const json   require  json    languages json    x000D          const jsonArray   json languages  x000D          const selectedLanguage   this state  x000D          return   x000D               lt div  gt  x000D                   lt DropdownList ref  dropdown  x000D                      data  jsonArray   x000D                      value  tselectedLanguage  x000D                      caseSensitive  false   x000D                      minLength  3  x000D                      filter  contains  x000D                      onChange  this handleLangChange    gt  x000D               lt  div gt              x000D             x000D        x000D     x000D   x000D   x000D

User · Answer

from child component to parent component as below  parent component  class Parent extends React Component      state     message   parent message       callbackFunction    childData    gt           this setState  message  childData            render             return                lt div gt                    lt Child parentCallback    this callbackFunction   gt                    lt p gt   this state message   lt  p gt               lt  div gt                      child component  class Child extends React Component      sendBackData        gt             this props parentCallback  child message               render              lt button onClick  sendBackData  gt click me to send back lt  button gt             I hope this work

User · Answer

Pass data from child to parent Component using Callback You need to pass from parent to child callback function  and then call it in the child   Parent Component -TimeModal   handleTimeValue    timeValue    gt          this setState  pouringDiff  timeValue            lt TimeSelection          prePourPreHours  prePourPreHours          setPourTime  this setPourTime          isPrePour  isPrePour          isResident  isResident          isMilitaryFormatTime  isMilitaryFormatTime          communityDateTime  moment communityDT  format  quot MM DD YYYY hh mm A quot            onSelectPouringTimeDiff  this handleTimeValue         gt   Note - onSelectPouringTimeDiff  this handleTimeValue  In the Child Component call props when required  componentDidMount   void           Todo use this as per your scenrio        this props onSelectPouringTimeDiff pouringDiff

User · Answer

You can even avoid the function at the parent updating the state directly  In Parent Component    render     return  lt Child sendData   v   gt  this setState  item  v       gt        In the Child Component    demoMethod       this props sendData value

User · Answer

The idea is to send a callback to the child which  will be called to give the data back  A complete and minimal example using functions    App will create a Child which will compute a random number and send it back directly to the parent  which will console log the result  const Child      handleRandom      gt      handleRandom Math random       return  lt span gt child lt  span gt      const App        gt   lt Child handleRandom   num    gt  console log num    gt

User · Answer

in React v16 8  function component  you can use useState   to create a function state that lets you update the parent state  then pass it on to child as a props attribute  then inside the child component you can trigger the parent state function  the following is a working snippet    x000D   x000D  const   useState   useEffect     React  x000D   x000D  function Timer   setParentCounter      x000D    const  counter  setCounter    React useState 0   x000D   x000D    useEffect      gt    x000D      let countersystem  x000D      countersystem   setTimeout      gt  setCounter counter   1   1000   x000D   x000D      return      gt    x000D        clearTimeout countersystem   x000D         x000D        counter    x000D   x000D    return   x000D       lt div className  App  gt  x000D         lt button x000D          onClick       gt    x000D            setParentCounter counter   x000D             x000D         gt  x000D          Set parent counter value x000D         lt  button gt  x000D         lt hr   gt  x000D         lt div gt Child Counter   counter  lt  div gt  x000D       lt  div gt  x000D       x000D    x000D   x000D  function App     x000D    const  parentCounter  setParentCounter    useState 0   x000D   x000D    return   x000D       lt div className  App  gt  x000D        Parent Counter   parentCounter  x000D         lt hr   gt  x000D         lt Timer setParentCounter  setParentCounter    gt  x000D       lt  div gt  x000D       x000D    x000D   x000D  ReactDOM render  lt App   gt   document getElementById  react-root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 4 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 4 umd react-dom production min js  gt  lt  script gt  x000D   lt div id  react-root  gt  lt  div gt  x000D   x000D   x000D

[reactjs] How to pass data from child component to its parent in ReactJS?

Examples related to reactjs