Pass function from parent to children in React.Children.map?

Question

I've been using the React Transition Group in a reusable TransitionComponent

class TransitionComponent extends React.Component {    
    render() {
        return(
            <div>
                {
                    React.Children.map(children, (slide) => {
                        return (
                            <CSSTransition
                                key={slide.props.hash}
                                unmountOnExit
                            >
                                <div tabIndex="-1" >
                                    {slide}
                                </div>
                            </CSSTransition>
                        );
                    })
                }
            </div>
        )
    }
}

TransitionComponent is used like this:

<TransitionComponent>
  <Child1 />
  <Child2 />
  <Child3 />
</TransitionComponent>

This has worked so far but now I need to pass a function from TransitionComponent to it's children.

I've tried this:

class TransitionComponent extends React.Component {
    someFunction = () => {
        console.log('someFunction was called')
    }

    render() {
        return(
            <div>
                {
                    React.Children.map(children, (slide) => {
                        return (
                            <CSSTransition
                                key={slide.props.hash}
                                unmountOnExit
                            >
                                <div tabIndex="-1" >
                                    { () => slide({ someFunction: this.someFunction }) }
                                </div>
                            </CSSTransition>
                        );
                    })
                }
            </div>
        )
    }
}

But I get this error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Answer 1

I got it working with React.cloneElement

          <div
            tabIndex="-1"
          >
            {React.cloneElement(slide, {
              someFunction: this. someFunction,
            })}
          </div>