How can insert content component in Layout component in react

Question

export default function Layout({ prop, title, subTitle, item }) {
  return (
    <LayoutContainer>
      <LayoutMain>
        <MainRow>
          <MainSubTitle>{subTitle}</MainSubTitle>
          <MainTitle>{title}</MainTitle>
          <MainText>
            우리는 모두 모여 춤을 추지. Let's get it.
          </MainText>
        </MainRow>
      </LayoutMain>
      <FixNav />
      {/*여기는 고정 네비게이션 바*/}
      <LayoutContents>{/*I want to insert content*/}</LayoutContents>
    </LayoutContainer>
  );
}

{/This is content component/}

export default function Process() {
  return (
    <Layout title="제조공정" subTitle="df">
      ???
    </Layout>
  );
}

I made Layout component, I want to use this component in many different content. For example, I want to build four contents in website. This layout is same. Without rewriting respectively.

please tell me How insert component fluidly. Thank you..!

Wrap your `Layout` around the root component that you want to apply, just like you already did with the `LayoutContainer` — Ryan Le, Sep 16 '21 at 12:02
Does this answer your question? [How to pass in a react component into another react component to transclude the first component's content?](https://stackoverflow.com/questions/25797048/how-to-pass-in-a-react-component-into-another-react-component-to-transclude-the) — Emile Bergeron, Sep 23 '21 at 15:06

score 1 · Answer 1 · answered Sep 16 '21 at 12:06

It's the children property

export default function Layout({ prop, children, title, subTitle, item }) {
  return (
    <LayoutContainer>
      <LayoutMain>
        <MainRow>
          <MainSubTitle>{subTitle}</MainSubTitle>
          <MainTitle>{title}</MainTitle>
          <MainText>
            우리는 모두 모여 춤을 추지. Let's get it.
          </MainText>
        </MainRow>
      </LayoutMain>
      <FixNav />
      {/*여기는 고정 네비게이션 바*/}
      <LayoutContents>{children}</LayoutContents>
    </LayoutContainer>
  );
}

How can insert content component in Layout component in react

1 Answers1