How to pass props to this props children

Question

I m trying to find the proper way to define some components which could be used in a generic way    lt Parent gt     lt Child value  1  gt     lt Child value  2  gt   lt  Parent gt    There is a logic going on for rendering between parent and children components of course  you can imagine  lt select gt  and  lt option gt  as an example of this logic   This is a dummy implementation for the purpose of the question   var Parent   React createClass     doSomething  function value           render  function         return   lt div gt  this props children  lt  div gt             var Child   React createClass     onClick  function         this props doSomething this props value      doSomething is undefined        render  function         return   lt div onClick  this onClick  gt  lt  div gt              The question is whenever you use  this props children  to define a wrapper component  how do you pass down some property to all its children

User · Answer

Passing Props to Nested Children

With the update to React 16.6 you can now use React.createContext and contextType.

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}

class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

React.createContext shines where React.cloneElement case couldn't handle nested components

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

User · Answer

Cleaner way considering one or more children   lt div gt       React Children map this props children  child   gt  React cloneElement child      this props      lt  div gt

User · Answer

Cloning children with new props You can use React Children to iterate over the children  and then clone each element with new props  shallow merged  using React cloneElement  For example   x000D   x000D  const Child      doSomething  value      gt       lt button onClick       gt  doSomething value   gt Click Me lt  button gt      class Parent extends React Component    doSomething   value   gt        console log  doSomething called by child with value    value          render         const childrenWithProps   React Children map this props children  child   gt             checking isValidElement is the safe way and avoids a typescript error too       if  React isValidElement child             return React cloneElement child    doSomething  this doSomething                   return child               return  lt div gt  childrenWithProps  lt  div gt          function App       return        lt Parent gt         lt Child value  1    gt         lt Child value  2    gt       lt  Parent gt          ReactDOM render  lt App   gt   document getElementById  container     x000D   lt script src  https   unpkg com react 17 umd react production min js  gt  lt  script gt   lt script src  https   unpkg com react-dom 17 umd react-dom production min js  gt  lt  script gt   lt div id  container  gt  lt  div gt  x000D   x000D   x000D   Calling children as a function Alternatively  you can pass props to children with render props  In this approach  the children  which can be children or any other prop name  is a function which can accept any arguments you want to pass and returns the children   x000D   x000D  const Child      doSomething  value      gt       lt button onClick       gt  doSomething value   gt Click Me lt  button gt      class Parent extends React Component    doSomething   value   gt        console log  doSomething called by child with value    value          render           note that children is called as a function and we can pass args to it     return  lt div gt  this props children this doSomething   lt  div gt          function App      return        lt Parent gt         doSomething   gt             lt React Fragment gt             lt Child doSomething  doSomething  value  1    gt             lt Child doSomething  doSomething  value  2    gt           lt  React Fragment gt                lt  Parent gt          ReactDOM render  lt App   gt   document getElementById  container     x000D   lt script src  https   unpkg com react 17 umd react production min js  gt  lt  script gt   lt script src  https   unpkg com react-dom 17 umd react-dom production min js  gt  lt  script gt   lt div id  container  gt  lt  div gt  x000D   x000D   x000D   Instead of  lt React Fragment gt  or simply  lt  gt  you can also return an array if you prefer

User · Answer

Maybe you can also find useful this feature  though many people have considered this as an anti-pattern it still can be used if you re know what you re doing and design your solution well   Function as Child Components

User · Answer

I needed to fix accepted answer above to make it work using that instead of this pointer  This within the scope of map function didn t have doSomething function defined   var Parent   React createClass   doSomething  function         console log  doSomething         render  function         var that   this      var childrenWithProps   React Children map this props children  function child            return React cloneElement child    doSomething  that doSomething                  return  lt div gt  childrenWithProps  lt  div gt        Update  this fix is for ECMAScript 5  in ES6 there is no need in var that this

User · Answer

Parent jsx   import React from  react    const doSomething   value   gt       const Parent   props   gt       lt div gt               props     props children             lt div gt Loading     required at least one child  lt  div gt             props children length                 lt props children type     props children props  doSomething  doSomething      props  gt  props children  lt  props children type gt                props children map  child  key    gt                 React cloneElement child      props  key  doSomething             lt  div gt       Child jsx   import React from  react       but better import doSomething right here     or use some flux store  for example redux library     export default    doSomething  value      gt       lt div onClick       gt  doSomething value    gt       and main jsx   import React from  react   import   render   from  react-dom   import Parent from    Parent   import Child from    Child    render     lt Parent gt       lt Child  gt       lt Child value  1   gt       lt Child value  2   gt     lt  Parent gt     document getElementById             see example here  https   plnkr co edit jJHQECrKRrtKlKYRpIWl p preview

User · Answer

According to the documentation of cloneElement    React cloneElement    element     props         children         Clone and return a new React element using element as the starting   point  The resulting element will have the original element   s props   with the new props merged in shallowly  New children will replace   existing children  key and ref from the original element will be   preserved       React cloneElement   is almost equivalent to    lt element type     element props      props  gt  children  lt  element type gt        However  it also preserves refs  This means that if you get a child   with a ref on it  you won   t accidentally steal it from your ancestor    You will get the same ref attached to your new element    So cloneElement is what you would use to provide custom props to the children  However there can be multiple children in the component and you would need to loop over it  What other answers suggest is for you to map over them using React Children map  However React Children map unlike React cloneElement changes the keys of the Element appending and extra    as the prefix  Check this question for more details  React cloneElement inside React Children map is causing element keys to change  If you wish to avoid it  you should instead go for the forEach function like  render         const newElements           React Children forEach this props children                 child   gt  newElements push                   React cloneElement                     child                          this props     customProps                                              return            lt div gt  newElements  lt  div gt

User · Answer

You no longer need  this props children   Now you can wrap your child component using render in Route and pass your props as usual    lt BrowserRouter gt     lt div gt       lt ul gt         lt li gt  lt Link to     gt Home lt  Link gt  lt  li gt         lt li gt  lt Link to   posts  gt Posts lt  Link gt  lt  li gt         lt li gt  lt Link to   about  gt About lt  Link gt  lt  li gt       lt  ul gt        lt hr  gt        lt Route path     exact component  Home    gt       lt Route path   posts  render       gt           lt Posts         value1  1          value2  2          data  this state data          gt           gt       lt Route path   about  component  About    gt     lt  div gt   lt  BrowserRouter gt

User · Answer

When using functional components  you will often get the TypeError  Cannot add property myNewProp  object is not extensible error when trying to set new properties on props children  There is a work around to this by cloning the props and then cloning the child itself with the new props   const MyParentComponent    props    gt      return        lt div className  whatever  gt         props children map  child    gt            const newProps        child props              set new props here on newProps         newProps myNewProp    something          const preparedChild        child  props  newProps           return preparedChild                lt  div gt

User · Answer

Some reason React children was not working for me  This is what worked for me   I wanted to just add a class to the child  similar to changing a prop   var newChildren   this props children map  child    gt     const className    MenuTooltip-item     child props className      return React cloneElement child    className            return  lt div gt  newChildren  lt  div gt     The trick here is the React cloneElement  You can pass any prop in a similar manner

User · Answer

The slickest way to do this        React cloneElement this props children  this props

User · Answer

The best way  which allows you to make property transfer is children like a function pattern https   medium com merrickchristensen function-as-child-components-5f3920a9ace9 Code snippet  https   stackblitz com edit react-fcmubc Example  const Parent      children      gt        const somePropsHere           style            color   quot red quot                   any other props here              return children somePropsHere     const ChildComponent   props   gt   lt h1     props  gt Hello world  lt  h1 gt   const App        gt      return        lt Parent gt         props   gt             lt ChildComponent     props  gt            Bla-bla-bla          lt  ChildComponent gt                lt  Parent gt

User · Answer

For a slightly cleaner way to do it  try   lt div gt       React cloneElement this props children    loggedIn  this state loggedIn      lt  div gt   Edit  To use with multiple individual children  the child must itself be a component  you can do  Tested in 16 8 6  lt div gt       React cloneElement this props children 0     loggedIn  true  testPropB  true          React cloneElement this props children 1     loggedIn  true  testPropA  false      lt  div gt

User · Answer

None of the answers address the issue of having children that are NOT React components  such as text strings  A workaround could be something like this      Render method of Parent component render        let props             setAlert        gt   alert  It works               let childrenWithProps   React Children map  this props children  function child            if  React isValidElement child                return React cloneElement child  props                       return child                return  lt div gt  childrenWithProps  lt  div gt

User · Answer

I think a render prop is the appropriate way to handle this scenario  You let the Parent provide the necessary props used in child component  by refactoring the Parent code to look to something like this   const Parent     children     gt      const doSomething value    gt        return children   doSomething        Then in the child Component you can access the function provided by the parent this way   class Child extends React      onClick     gt    this props doSomething      render          return   lt div onClick  this onClick  gt  lt  div gt             Now the fianl stucture will look like this    lt Parent gt      doSomething    gt       lt Fragment gt        lt Child value  1  doSomething  doSomething  gt        lt Child value  2  doSomething  doSomething  gt       lt Fragment   gt         lt  Parent gt

User · Answer

Method 1 - clone children  const Parent    props    gt       const attributeToAddOrReplace   Some Value     const childrenWithAdjustedProps   React Children map props children  child   gt        React cloneElement child    attributeToAddOrReplace             return  lt div gt  childrenWithAdjustedProps   lt  div gt      Method 2 - use composable context  Context allows you to pass a prop to a deep child component without explicitly passing it as a prop through the components in between     Context comes with drawbacks     Data doesn t flow in the regular way - via props   Using context creates a contract between the consumer and the provider  It might be more difficult to understand and replicate the requirements needed to reuse a component     Using a composable context  export const Context   createContext lt any gt  null    export const ComposableContext      children     otherProps    children ReactNode   x string  any     gt        const context   useContext Context      return         lt Context Provider     context  value      context     otherProps   gt  children  lt  Context Provider gt            function App       return          lt Provider1 gt               lt Provider2 gt                    lt Displayer   gt               lt  Provider2 gt         lt  Provider1 gt          const Provider1    children   children ReactNode     gt         lt ComposableContext greeting  Hello  gt  children  lt  ComposableContext gt     const Provider2    children   children ReactNode     gt         lt ComposableContext name  world  gt  children  lt  ComposableContext gt     const Displayer        gt      const context   useContext Context     return  lt div gt  context greeting    context name  lt  div gt

User · Answer

Render props is most accurate approach to this problem  Instead of passing the child component to parent component as children props  let parent render child component manually  Render is built-in props in react  which takes function parameter  In this function you can let parent component render whatever you want with custom parameters  Basically it does the same thing as child props but it is more customizable    class Child extends React Component     render         return  lt div className  Child  gt        Child        lt p onClick  this props doSomething  gt Click me lt  p gt              this props a       lt  div gt          class Parent extends React Component     doSomething       alert  Parent talks            render         return  lt div className  Parent  gt        Parent        this props render           anythingToPassChildren 1           doSomething  this doSomething         lt  div gt          class Application extends React Component     render         return  lt div gt         lt Parent render             props   gt   lt Child     props    gt             gt       lt  div gt           Example at codepen

User · Answer

If you have multiple children you want to pass props to  you can do it this way  using the React Children map   render         let updatedChildren   React Children map this props children           child    gt                return React cloneElement child    newProp  newProp                      return            lt div gt                updatedChildren            lt  div gt             If your component is having just one child  there s no need for mapping  you can just cloneElement straight away   render         return            lt div gt                                React cloneElement this props children                        newProp  newProp                                           lt  div gt

User · Answer

Is this what you required     var Parent   React createClass     doSomething  function value          render  function         return   lt div gt                 lt Child doSome  this doSomething    gt               lt  div gt          var Child   React createClass     onClick function         this props doSome value      doSomething is undefined          render  function         return   lt div onClick  this onClick  gt  lt  div gt

User · Answer

Further to  and rest answer  this is how I clone the children and add a class    lt div className  parent  gt       React Children map this props children  child   gt  React cloneElement child   className  child       lt  div gt

User · Answer

You can use React cloneElement  it s better to know how it works before you start using it in your application  It s introduced in React v0 13  read on for more information  so something along with this work for you    lt div gt  React cloneElement this props children      this props    lt  div gt    So bring the lines from React documentation for you to understand how it s all working and how you can make use of them      In React v0 13 RC2 we will introduce a new API  similar to   React addons cloneWithProps  with this signature    React cloneElement element  props     children        Unlike cloneWithProps  this new function does not have any magic   built-in behavior for merging style and className for the same reason   we don t have that feature from transferPropsTo  Nobody is sure what   exactly the complete list of magic things are  which makes it   difficult to reason about the code and difficult to reuse when style   has a different signature  e g  in the upcoming React Native        React cloneElement is almost equivalent to     lt element type     element props      props  gt  children  lt  element type gt       However  unlike JSX and cloneWithProps  it also preserves refs  This   means that if you get a child with a ref on it  you won t accidentally   steal it from your ancestor  You will get the same ref attached to   your new element       One common pattern is to map over your children and add a new prop    There were many issues reported about cloneWithProps losing the ref    making it harder to reason about your code  Now following the same   pattern with cloneElement will work as expected  For example    var newChildren   React Children map this props children  function child      return React cloneElement child    foo  true             Note  React cloneElement child    ref   newRef     DOES override the   ref so it is still not possible for two parents to have a ref to the   same child  unless you use callback-refs       This was a critical feature to get into React 0 13 since props are now   immutable  The upgrade path is often to clone the element  but by   doing so you might lose the ref  Therefore  we needed a nicer upgrade   path here  As we were upgrading callsites at Facebook we realized that   we needed this method  We got the same feedback from the community    Therefore we decided to make another RC before the final release to   make sure we get this in       We plan to eventually deprecate React addons cloneWithProps  We re not   doing it yet  but this is a good opportunity to start thinking about   your own uses and consider using React cloneElement instead  We ll be   sure to ship a release with deprecation notices before we actually   remove it so no immediate action is necessary    more here

User · Answer

Pass props to direct children   See all other answers  Pass shared  global data through the component tree via context     Context is designed to share data that can be considered    global    for a tree of React components  such as the current authenticated user  theme  or preferred language  1   Disclaimer  This is an updated answer  the previous one used the old context API  It is based on Consumer   Provide principle  First  create your context   const   Provider  Consumer     React createContext defaultValue     Then use via   lt Provider value     some value     gt     children     potential consumers     lt Provider   gt    and    lt Consumer gt     value   gt     render something based on the context value      lt  Consumer gt       All Consumers that are descendants of a Provider will re-render whenever the Provider   s value prop changes  The propagation from Provider to its descendant Consumers is not subject to the shouldComponentUpdate method  so the Consumer is updated even when an ancestor component bails out of the update   1    Full example  semi-pseudo code   import React from  react    const   Provider  Consumer     React createContext   color   white       class App extends React Component     constructor props        super props       this state           value    color   black                   render         return          lt Provider value  this state value  gt           lt Toolbar   gt         lt  Provider gt                class Toolbar extends React Component     render         return           lt div gt           lt p gt  Consumer can be arbitrary levels deep  lt  p gt           lt Consumer gt              value   gt   lt p gt  The toolbar will be in color  value color   lt  p gt            lt  Consumer gt         lt  div gt                 1 https   facebook github io react docs context html

User · Answer

I came to this post while researching for a similar need  but i felt cloning solution that is so popular  to be too raw and takes my focus away from the functionality  I found an article in react documents Higher Order Components Here is my sample  import React from  react    const withForm    ViewComponent    gt        return  props    gt             const myParam    quot Custom param quot            return                lt  gt                   lt div style   border  quot 2px solid black quot   margin  quot 10px quot    gt                       lt div gt this is poc form lt  div gt                       lt div gt                           lt ViewComponent myParam  myParam      props  gt  lt  ViewComponent gt                       lt  div gt                   lt  div gt               lt   gt                     export default withForm    const pocQuickView    props    gt        return            lt div style   border  quot 1px solid grey quot    gt               lt div gt this is poc quick view and it is meant to show when mouse hovers over a link lt  div gt           lt  div gt           export default withForm pocQuickView    For me i found a flexible solution in implementing the pattern of Higher Order Components  Of course it depends on the functionality  but it is good if someone else is looking for a similar requirement  it is much better than being dependent on raw level react code like cloning  Other pattern that i actively use is the container pattern  do read about it  there are many articles out there

User · Answer

Try this   lt div gt  React cloneElement this props children      this props    lt  div gt    It worked for me using react-15 1

User · Answer

Got inspired by all the answers above and this is what I have done  I am passing some props like some data  and some components  import React from  quot react quot    const Parent      children      gt      const   setCheckoutData     actions shop    const   Input  FieldError     libraries theme components forms     const onSubmit    data    gt        setCheckoutData data           const childrenWithProps   React Children map      children       child    gt        React cloneElement child            Input  Input          FieldError  FieldError          onSubmit  onSubmit                   return  lt  gt  childrenWithProps  lt   gt

User · Answer

For any one who has a single child element this should do it    React isValidElement this props children                      React cloneElement this props children                             prop you want to pass                                            null

[javascript] How to pass props to {this.props.children}

Passing Props to Nested Children

Examples related to javascript

Examples related to reactjs

Examples related to react-jsx