React - Component export multiple components

Question

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>

Yes. And if your Header and Footer components rendered their children prop you'd see it should work just fine. Or is this actually what you are asking for help with? — Drew Reese
– Drew Reese, Commented Feb 3, 2022 at 9:43
i want to refactor the component to work like the second code, but I don't know how to do. — cossenodex
– cossenodex, Commented Feb 3, 2022 at 9:46

Drew Reese · Accepted Answer · 2022-02-03 11:32:21Z

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>

Collectives™ on Stack Overflow

React - Component export multiple components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related