CODEWITHSUNDEEP
javascriptreactjs
imrok
imrok

Reputation: 837

how to pass props to children with React.cloneElement?

I'm trying to pass props to my component children but I have this error : Unknown prop 'user' on tag. Remove this prop from the element.

When looking at documentation and questions, I think I understood that props given to React.cloneElement (second argument) must be DOM recognized properties.

So my question is how to pass props to the component children and make them accessible in this.props ?

Here is my code :

render() {

    const { children } = this.props
    const { user } = this.state

    const childrenWithProps = React.Children.map(children, child =>
        React.cloneElement(child, { user })    
    )

    return (
        <div>
            { childrenWithProps }
        </div>
    )
}

edit : the children component's propTypes

ChildrenPage.propTypes = {
    user: PropTypes.object
}

export default ChildrenPage

Upvotes: 5

Views: 3935

Answers (2)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

Your code looks fine for me. Usually, React give this warning when you are trying to render DOM element(Not a React Component) with invalid/non-standard DOM attribute.

In your case, this might happen if your children collection has a DOM element. Since user is not a standard DOM attribute, it might fire this warning when you are trying to clone the element with user prop.

You can read more about this error here.

Hope this helps!

Upvotes: 3

Charanjeet Kaur
Charanjeet Kaur

Reputation: 1197

Make sure that you are not passing down the children key as props. Below code removes children key from props before passing it down to the children. 

let key = 'children';
let {[key]: _, ...newProps} = state;
{React.Children.map(this.props.children, child => 
  React.cloneElement(child, {...newProps}))}

This is one of the possible reasons. and, let me know if this solution works. For more, https://facebook.github.io/react/warnings/unknown-prop.html

Upvotes: 0

Related Questions