Passing new props to this.props.children

example.jsx

export default Class { 
  constructor(props) {
    this.state = {
      userRole: 'doctor'
    }
  }

  render(){

    const childrenWithProps = React.Children.map(this.props.children,
     (child) => React.cloneElement(child, {
       userRole: this.state.userRole,
       name: this.stae.name
     })
    )
    return childrenWithProps
  }
}
// Another File
class Children {
  props {
    userRole: String
  }

  renderA = () => {
    return <div>this.prop.name</div>
  }

  render() {
    if (this.props.userRole) {
     return this.renderA()  
    } else {
      return this.renderB()
    }
  }
}