CODEWITHSUNDEEP
javascriptreactjs
cossenodex
cossenodex

Reputation: 43

React - Component export multiple components

I have this component that receives a header, main and footer. (header and footer are optional)

const View = (props) => {
  const { header, main, footer } = props;
  return (
   <div>
     {header && <header>{header}</header>}
     <main>{main}</main>
     {footer && <footer>{footer}</footer>}
  </div>
  );
};


 ReactDOM.render(
    <View header={<p>content header</p>} main={<p>content main</p>} footer={<p>content footer</p>} />,
    document.body
  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

But I don't want to pass the jsx through the props. I want to do something like this.

How do i do it?

const View = (props) => {
  const { children } = props;
  return (
   <div>
   {children}
  </div>
  );
};


 ReactDOM.render(
    <View>
      <View.Header>
        <p>content header</p>
      </View.Header>
      <View.Main>
        <p>content main</p>
      </View.Main>
      <View.Footer>
        <p>content footer</p>
      </View.Footer>
    </View>
    ,
    document.body
  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 2

Views: 430

Answers (1)

Drew Reese
Drew Reese

Reputation: 203476

It looks like you are wanting to create a compound component of the FullView component. Declare the Header, Main, and Footer components and then add them as properties on the FullView component.

// FullView.js
const FullView = ({ children }) => <div>{children}</div>;

const Header = ({ children }) => <div>{children}</div>;
const Main = ({ children }) => <div>{children}</div>;
const Footer = ({ children }) => <div>{children}</div>;

FullView.Header = Header;
FullView.Main = Main;
FullView.Footer = Footer;

// export default FullView;

// index.js
ReactDOM.render(
  <FullView>
    <FullView.Header>
      <p>content header</p>
    </FullView.Header>
    <FullView.Main>
      <p>content main</p>
    </FullView.Main>
    <FullView.Footer>
      <p>content footer</p>
    </FullView.Footer>
  </FullView>,
  document.body
 );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

Upvotes: 3

Related Questions