Указать контент в компоненте (children)

В React можно добавить компонент с указанным контентом. Например, если для каждого диалогового окна надо сделать свою форму.

<Dialog>Форма добавления</Dialog>
<Dialog>Форма редактирования</Dialog>

После этого становится доступен пропс {children}, в котором содержится указанный контент.

function Dialog({children}) {
  return (
    <div class="dialog-body">
      { children }
    </div>
  );
}

Пример кода на CodePen

Атрибуты

Атрибуты будут работать также, как при обычном выводе компонента.

<Dialog title="Редактирование">Форма редактирования</Dialog>

Код в компоненте.

function Dialog({children, title}) {
  return (
    <>
      <p class="dialog-title">{ title }</p>
      <div class="dialog-body">{ children }</div>
    </>
  );
}