JAVASCRIPT

react.children

import React from 'react';

type Props = {
  children: JSX.Element[] | JSX.Element;
  margin: number;
};

export default function Stack({ children, margin }: Props) {
  function wrapChildren() {
    return React.Children.map(children, (child) =>
      React.cloneElement(child, { style: { ...child.props.style, marginBottom: `${margin}px` } }),
    );
  }

  return <>{wrapChildren()}</>;
}

Children in JSX

<MyComponent>Hello world!</MyComponent>

jsx tag with children react js

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX Children

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>