Pass props to {children()} for use in component of child page

Question

How can I pass props to a component of a child page?

The prop that I am trying to pass is onToggleBooking: PropTypes.func which is defined in my layout.js (root file) as

lass Template extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        isBookingVisible: false,
    }
    this.handleToggleBooking = this.handleToggleBooking.bind(this)
}

handleToggleBooking() {
    this.setState({
        isBookingVisible: !this.state.isBookingVisible
    })
}

render() {
    const { children } = this.props
    return (
        <main className={`${this.state.isBookingVisible ? 'is-booking-visible' : ''}`}>
            {children()}
        </main>
        )
    }
}

Template.propTypes = {
    children: PropTypes.func
}
export default Template

I want to pass onToggleBooking={this.handleToggleBooking} prop to {children()} so I am able to pass and use in a component of one of the child pages.

To do this I tried

{
  children.map(child => React.cloneElement(child, {
    onToggleBooking
  }))
}

But I receive an error of children.map is not defined.

Answer 1

First, it's ideal to render children via props like:

  render() {
    return <div>{ this.props.children }</div>
  }  

Rendering children as prop functions is doable but you hould take a look to ensure your class the children are extended from is configured correctly, and the resulting render template is valid:

class CoolClass extends Component {
  render() {                  
      return this.props.children()
  }
}  

And then the template you call when rendering should look like:

<CoolClass>
  {() => <h1>Hello World!</h1>}
</CoolClass>  

You are close with passing sown the toggle handler using onToggleBooking={this.handleToggleBooking} , but it needs to be provided as a prop itself on a component or child your passing down. You can either edit the constructor to include it with your props.children , but that may be a pain to debug correctly calling children() prop as a fucntion.