Pass props to parent component in React js

Question

Is there not a simple way to pass a child s props to its parent using events  in React js     var Child   React createClass      render  function           lt a onClick  this props onClick  gt Click me lt  a gt               var Parent   React createClass      onClick  function event            event component props  why is this not available           render  function           lt Child onClick  this onClick    gt                 I know you can use controlled components to pass an input s value but it d be nice to pass the whole kit n  kaboodle  Sometimes the child component contains a set of information you d rather not have to look up     Perhaps there s a way to bind the component to the event     UPDATE     9 1 2015    After using React for over a year  and spurred on by Sebastien Lorber s answer  I ve concluded passing child components as arguments to functions in parents is not in fact the React way  nor was it ever a good idea  I ve switched the answer

User · Answer

It appears there s a simple answer  Consider this   var Child   React createClass     render  function          lt a onClick  this props onClick bind null  this   gt Click me lt  a gt           var Parent   React createClass     onClick  function component  event        component props       gt   Object            render  function          lt Child onClick  this onClick    gt            The key is calling bind null  this  on the this props onClick event  passed from the parent  Now  the onClick function accepts arguments component  AND event  I think that s the best of all worlds   UPDATE  9 1 2015  This was a bad idea  letting child implementation details leak in to the parent was never a good path  See Sebastien Lorber s answer

User · Answer

Basically you use props to send information to and from Child and Parent    Adding to all the wonderful answers  let me give a simple example that explains passing values from child to parent component in React  App js  class App extends React Component         constructor                super                this handleFilterUpdate   this handleFilterUpdate bind this               this state  name  igi                 handleFilterUpdate filterValue                this setState                     name  filterValue                            render           return            lt div gt               lt Header change  this handleFilterUpdate  name  this state name    gt               lt p gt  this state name  lt  p gt           lt  div gt                      Header js  class Header extends React Component         constructor                super                this state                     names   jessy                              Change event              this props change this state names         this props change  jessy            render           return           lt button onClick  this Change bind this   gt click lt  button gt                       Main js  import React from  react   import ReactDOM from  react-dom    import App from    App jsx    ReactDOM render  lt App   gt   document getElementById  app         Thats it   now you can pass values from your client to the server   Take a look at the Change function in the Header js  Change event             this props change this state names         this props change  jessy          This is how you push values into the props from client to the server

User · Answer

The question is how to pass argument from child to parent component  This example is easy to use and tested     Child component class Child 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                       Parent component class Parent extends React Component       constructor props            super props           var handleToUpdate    this handleToUpdate bind this              handleToUpdate someArg           alert  We pass argument from Child to Parent   n    someArg              render             var handleToUpdate      this handleToUpdate          return   lt div gt             lt Child handleToUpdate    handleToUpdate bind this     gt           lt  div gt            if document querySelector   demo         ReactDOM render           lt Parent   gt           document querySelector   demo              Look at JSFIDDLE

User · Answer

This is an example without using the onClick event  I simply pass a callback function to the child by props  With that callback the child call also send data back  I was inspired by the examples in the docs   Small example  this is in a tsx files  so props and states must be declared fully  I deleted some logic out of the components  so it is less code     Update  Important is to bind this to the callback  otherwise the callback has the scope of the child and not the parent  Only problem  it is the  old  parent     SymptomChoser is the parent   interface SymptomChooserState        true when a symptom was pressed can now add more detail   isInDetailMode  boolean      since when user has this symptoms   sinceDate  Date     class SymptomChooser extends Component lt     SymptomChooserState gt       state         isInDetailMode  false      sinceDate  new Date          helloParent symptom  Symptom        console log  This is parent of     symptom props name          TODO enable detail mode        render         return          lt View gt           lt Symptom name  Fieber  callback  this helloParent bind this     gt         lt  View gt                 Symptom is the child  in the props of the child I declared the callback function  in the function selectedSymptom the callback is called    interface SymptomProps        name of the symptom   name  string       callback to notify SymptomChooser about selected Symptom    callback   symptom  Symptom    gt  void    class Symptom extends Component lt SymptomProps  SymptomState gt      state         isSelected  false      severity  0        selectedSymptom         this setState   isSelected  true         this props callback this          render         return            symptom is not selected        lt Button         style   AppStyle button           onPress  this selectedSymptom bind this   gt           lt Text style   AppStyle textButton   gt  this props name  lt  Text gt         lt  Button gt

User · Answer

Here is a simple 3 step ES6 implementation using function binding in the parent constructor   This is the first way the official react tutorial recommends  there is also public class fields syntax not covered here    You can find all of this information here https   reactjs org docs handling-events html  Binding Parent Functions so Children Can Call Them  And pass data up to the parent   D     Make sure in the parent constructor you bind the function you created in the parent Pass the bound function down to the child as a prop  No lambda because we are passing a ref to function  Call the bound function from a child event  Lambda   We re calling the function when the event is fired      If we don t do this the function will automatically run on load and not be triggered on the event     Parent Function        handleFilterApply filterVals       Parent Constructor  this handleFilterApply   this handleFilterApply bind this     Prop Passed to Child  onApplyClick    this handleFilterApply    Child Event Call  onClick         gt   props onApplyClick filterVals

User · Answer

Edit  see the end examples for ES6 updated examples   This answer simply handle the case of direct parent-child relationship  When parent and child have potentially a lot of intermediaries  check this answer   Other solutions are missing the point  While they still work fine  other answers are missing something very important      Is there not a simple way to pass a child s props to its parent using events  in React js    The parent already has that child prop   if the child has a prop  then it is because its parent provided that prop to the child  Why do you want the child to pass back the prop to the parent  while the parent obviously already has that prop   Better implementation  Child  it really does not have to be more complicated than that   var Child   React createClass     render  function          return  lt button onClick  this props onClick  gt  this props text  lt  button gt              Parent with single child  using the value it passes to the child  var Parent   React createClass     getInitialState  function          return  childText   Click me   parent prop            render  function          return          lt Child onClick  this handleChildClick  text  this state childText   gt                handleChildClick  function event            You can access the prop you pass to the children          because you already have it           Here you have it in state but it could also be          in props  coming from another parent       alert  The Child button text is      this state childText           You can also access the target of the click here          if you want to do some magic stuff      alert  The Child HTML is      event target outerHTML             JsFiddle  Parent with list of children  you still have everything you need on the parent and don t need to make the child more complicated   var Parent   React createClass     getInitialState  function          return  childrenData              childText   Click me 1    childNumber  1             childText   Click me 2    childNumber  2                  render  function          var children   this state childrenData map function childData childIndex            return  lt Child onClick  this handleChildClick bind null childData   text  childData childText   gt         bind this        return  lt div gt  children  lt  div gt           handleChildClick  function childData event         alert  The Child button data is      childData childText     -     childData childNumber        alert  The Child HTML is      event target outerHTML             JsFiddle  It is also possible to use this handleChildClick bind null childIndex  and then use this state childrenData childIndex   Note we are binding with a null context because otherwise React issues a warning related to its autobinding system  Using null means you don t want to change the function context  See also   About encapsulation and coupling in other answers  This is for me a bad idea in term of coupling and encapsulation   var Parent   React createClass     handleClick  function childComponent            using childComponent props         using childComponent refs button         or anything else using childComponent        render  function          lt Child onClick  this handleClick    gt            Using props  As I explained above  you already have the props in the parent so it s useless to pass the whole child component to access props   Using refs   You already have the click target in the event  and in most case this is enough   Additionnally  you could have used a ref directly on the child    lt Child ref  theChild       gt    And access the DOM node in the parent with  React findDOMNode this refs theChild    For more advanced cases where you want to access multiple refs of the child in the parent  the child could pass all the dom nodes directly in the callback   The component has an interface  props  and the parent should not assume anything about the inner working of the child  including its inner DOM structure or which DOM nodes it declares refs for  A parent using a ref of a child means that you tightly couple the 2 components   To illustrate the issue  I ll take this quote about the Shadow DOM  that is used inside browsers to render things like sliders  scrollbars  video players         They created a boundary between what you  the Web developer can reach   and what   s considered implementation details  thus inaccessible to   you  The browser however  can traipse across this boundary at will    With this boundary in place  they were able to build all HTML elements   using the same good-old Web technologies  out of the divs and spans   just like you would    The problem is that if you let the child implementation details leak into the parent  you make it very hard to refactor the child without affecting the parent  This means as a library author  or as a browser editor with Shadow DOM  this is very dangerous because you let the client access too much  making it very hard to upgrade code without breaking retrocompatibility   If Chrome had implemented its scrollbar letting the client access the inner dom nodes of that scrollbar  this means that the client may have the possibility to simply break that scrollbar  and that apps would break more easily when Chrome perform its auto-update after refactoring the scrollbar    Instead  they only give access to some safe things like customizing some parts of the scrollbar with CSS   About using anything else  Passing the whole component in the callback is dangerous and may lead novice developers to do very weird things like calling childComponent setState      or childComponent forceUpdate    or assigning it new variables  inside the parent  making the whole app much harder to reason about     Edit  ES6 examples  As many people now use ES6  here are the same examples for ES6 syntax  The child can be very simple   const Child        onClick     text      gt       lt button onClick  onClick  gt       text     lt  button gt      The parent can be either a class  and it can eventually manage the state itself  but I m passing it as props here   class Parent1 extends React Component     handleChildClick childData event         alert  The Child button data is      childData childText     -     childData childNumber        alert  The Child HTML is      event target outerHTML         render         return          lt div gt           this props childrenData map child   gt               lt Child             key  child childNumber              text  child childText               onClick  e   gt  this handleChildClick child e               gt                     lt  div gt                 But it can also be simplified if it does not need to manage state   const Parent2     childrenData     gt       lt div gt        childrenData map child   gt            lt Child          key  child childNumber           text  child childText            onClick  e   gt                alert  The Child button data is      child childText     -     child childNumber                       alert  The Child HTML is      e target outerHTML                        gt              lt  div gt      JsFiddle    PERF WARNING  apply to ES5 ES6   if you are using PureComponent or shouldComponentUpdate  the above implementations will not be optimized by default because using onClick  e   gt  doSomething     or binding directly during the render phase  because it will create a new function everytime the parent renders  If this is a perf bottleneck in your app  you can pass the data to the children  and reinject it inside  stable  callback  set on the parent class  and binded to this in class constructor  so that PureComponent optimization can kick in  or you can implement your own shouldComponentUpdate and ignore the callback in the props comparison check   You can also use Recompose library  which provide higher order components to achieve fine-tuned optimisations      A component that is expensive to render const ExpensiveComponent      propA  propB      gt            Optimized version of same component  using shallow comparison of props    Same effect as React s PureRenderMixin const OptimizedComponent   pure ExpensiveComponent      Even more optimized  only updates if specific prop keys have changed const HyperOptimizedComponent   onlyUpdateForKeys   propA    propB    ExpensiveComponent    In this case you could optimize the Child component by using   const OptimizedChild   onlyUpdateForKeys   text    Child

User · Answer

Update  9 1 15   The OP has made this question a bit of a moving target  It   s been updated again  So  I feel responsible to update my reply   First  an answer to your provided example   Yes  this is possible   You can solve this by updating Child   s onClick to be this props onClick bind null  this    var Child   React createClass     render  function          return  lt a onClick  this props onClick bind null  this   gt Click me lt  a gt             The event handler in your Parent can then access the component and event like so     onClick  function  component  event           console log component  event          JSBin snapshot    But the question itself is misleading  Parent already knows Child   s props   This isn   t clear in the provided example because no props are actually being provided  This sample code might better support the question being asked   var Child   React createClass     render  function          return  lt a onClick  this props onClick  gt   this props text   lt  a gt            var Parent   React createClass     getInitialState  function          return   text   Click here            onClick  function  event           event component props  why is this not available          render  function         return  lt Child onClick  this onClick  text  this state text    gt             It becomes much clearer in this example that you already know what the props of Child are   JSBin snapshot    If it   s truly about using a Child   s props     If it   s truly about using a Child   s props  you can avoid any hookup with Child altogether   JSX has a spread attributes API I often use on components like Child  It takes all the props and applies them to a component  Child would look like this   var Child   React createClass     render  function          return  lt a     this props  gt   this props text   lt  a gt             Allowing you to use the values directly in the Parent   var Parent   React createClass     getInitialState  function          return   text   Click here            onClick  function  text        alert text          render  function         return  lt Child onClick  this onClick bind null  this state text   text  this state text    gt             JSBin snapshot   And there s no additional configuration required as you hookup additional Child components  var Parent   React createClass     getInitialState  function          return         text   Click here         text2   No  Click here                 onClick  function  text        alert text          render  function         return  lt div gt         lt Child onClick  this onClick bind null  this state text   text  this state text    gt         lt Child onClick  this onClick bind null  this state text2   text  this state text2    gt       lt  div gt             JSBin snapshot  But I suspect that   s not your actual use case  So let   s dig further       A robust practical example  The generic nature of the provided example is a hard to talk about  I   ve created a component that demonstrations a practical use for the question above  implemented in a very Reacty way   DTServiceCalculator working example DTServiceCalculator repo  This component is a simple service calculator  You provide it with a list of services  with names and prices  and it will calculate a total the selected prices   Children are blissfully ignorant  ServiceItem is the child-component in this example  It doesn   t have many opinions about the outside world  It requires a few props  one of which is a function to be called when clicked    lt div onClick  this props handleClick bind this props index     gt   It does nothing but to call the provided handleClick callback with the provided index source    Parents are Children  DTServicesCalculator is the parent-component is this example  It   s also a child  Let   s look   DTServiceCalculator creates a list of child-component  ServiceItems  and provides them with props  source   It   s the parent-component of ServiceItem but it s the child-component of the component passing it the list  It doesn t own the data  So it again delegates handling of the component to its parent-component source   lt ServiceItem chosen  chosen  index  i  key  id  price  price  name  name  onSelect  this props handleServiceItem    gt   handleServiceItem captures the index  passed from the child  and provides it to its parent  source   handleServiceClick  index      this props onSelect index       Owners know everything  The concept of    Ownership    is an important one in React  I recommend reading more about it here   In the example I   ve shown  I keep delegating handling of an event up the component tree until we get to the component that owns the state   When we finally get there  we handle the state selection deselection like so  source    handleSelect  index      let services       this state services     services index  chosen    services index  chosen    false   true    this setState   services  services           Conclusion  Try keeping your outer-most components as opaque as possible  Strive to make sure that they have very few preferences about how a parent-component might choose to implement them   Keep aware of who owns the data you are manipulating  In most cases  you will need to delegate event handling up the tree to the component that owns that state   Aside  The Flux pattern is a good way to reduce this type of necessary hookup in apps

[javascript] Pass props to parent component in React.js

UPDATE: 9/1/2015

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components