Use context from consumer in children

Question

I have consumer, which receive context from provider:

const ViewModeConsumer = ({children}) => (
  <ModeContext.Consumer>
    {context => (
      <aside>{children}</aside>
    )}
  </ModeContext.Consumer>
)

I want to use context inside children element, and set it as a props to nested elements. What is the correct way to do this?

Thanks in advance.

Why dont you import same Context to the children? – duc mai Apr 05 '19 at 12:25 — duc mai, Apr 05 '19 at 12:25

Shubham Khatri · Accepted Answer · 2019-04-05T10:56:59.293

You can use React.cloneElement to pass props to children

const ViewModeConsumer = ({children}) => (
  <ModeContext.Consumer>
    {context => (
      <aside>
         {React.Children.map(children, child => {
              return React.cloneElement(child, {context});
         })}
      </aside>
    )}
  </ModeContext.Consumer>
)

However if your parent logic is just to pass context onto its children, Then its probably better to write an HOC for which you call for each component instead of rendering them as children to a parent component

const withViewModeContext = (Component) => {
    return (props) => (
      <ModeContext.Consumer>
        {context => (
             <Component {...props} context ={context} />
        )}
      </ModeContext.Consumer>
     )
}

and access the context within the children from props.

If you are on v16.6.0 or above of React, you don't even need an HOC and can defined static contentTypes for the children component

You can refer this post for more details: Access React Context outside of render function

Use context from consumer in children

1 Answers1