React Props.Children

Пример

Родительский компонент отправляет контент между открывающими и закрывающими тегами дочерних компонентов Son и Daughter:

// Компонент Сын
function Son(props) {
  return (
    <div style={{ background: 'lightgreen' }}>
      <h2>Сын</h2>
      <div>{props.children}</div>
    </div>
  );
}

// Компонент Дочь
function Daughter(props) {
  const { brand, model } = props;
  return (
    <div style={{ background: 'lightblue' }}>
      <h2>Дочь</h2>
      <div>{props.children}</div>
    </div>
  );
}

// Родительский компонент
function Parent() {
  return (
    <div>
      <h1>Мои двое детей</h1>
      <Son>
        <p>
          Это было написано в родительском компоненте, но отображено частью компонента сына.
        </p>
      </Son>
      <Daughter>
        <p>
          Это было написано в родительском компоненте, но отображено частью компонента дочери.
        </p>
      </Daughter>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<Parent />);