CODEWITHSUNDEEP
reactjslayoutcomponents
jaeseong
jaeseong

Reputation: 1

How can insert content component in Layout component in react

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..!

Upvotes: 0

Views: 631

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 31005

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>
  );
}

Upvotes: 1

Related Questions