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:

Answer 1

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) => {
  return (
    

      {props.children.map((child) => {
        const newProps = { ...child.props }
        // set new props here on newProps
        newProps.myNewProp = 'something'
        const preparedChild = { ...child, props: newProps }
        return preparedChild
      })}
    
  )
}