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

Got inspired by all the answers above and this is what I have done. I am passing some props like some data, and some components.

import React from "react";

const Parent = ({ children }) => {
  const { setCheckoutData } = actions.shop;
  const { Input, FieldError } = libraries.theme.components.forms;

  const onSubmit = (data) => {
    setCheckoutData(data);
  };

  const childrenWithProps = React.Children.map(
    children,
    (child) =>
      React.cloneElement(child, {
        Input: Input,
        FieldError: FieldError,
        onSubmit: onSubmit,
      })
  );

  return <>{childrenWithProps};
};