CODEWITHSUNDEEP
javascriptreactjs
Taylor Austin
Taylor Austin

Reputation: 6027

How to pass props through this.props.children() not this.props.children

I want to pass all my props through the gatsby layout. For example:

import React, { Component } from 'react';

export default class ExampleLayout extends Component {
  render() {
    const { data } = this.props;
    return <div>{this.props.children(data)}</div>; // --> this does not work, but I want to do something like this
  }
}

Something to note here is that this is calling this.props.children() as a function not a non-function call this.props.children. I tried to do the way with the non-function call recommended on other post, but could not get it to work.

Upvotes: 2

Views: 5783

Answers (1)

Tal Goldfus
Tal Goldfus

Reputation: 151

You can use React.Children.map or React.Children.forEach and iterate through all of the direct children of your component and pass them down your props. eg:

import React, { Component, Children } from 'react';

export default class ExampleLayout extends Component {
  render() {
    const { data } = this.props;
    const children = this.props.children()
    {Children.map(children, child => React.cloneElement(child, { ...data}))}
  }
}

Upvotes: 2

Related Questions