Exporting multiple non functional components in React js

Question

I am trying to create a component Book, which has a header, and I want to be able to import it in App.js as shown in the code below, I am fairly new to react and I do not know how to look up for it because I don't know how this concept is called. How can make a component Book and that component has other non functional components such as Book.Header for a header book or Book.Title, and that I can use as shown in the App.js

const Book = () => (
  <div className="book">
    <Book.Header />
  </div>
);

Book.Header = ({child}) => (
  <div><p>{child}</p></div> // here should render the text from Book.Header in App.js
);

export default Book;

And in App.js

import Book from "./components/Book";
function App() {
  return (
    <div className="App">
      <Book
        <Book.Header>My book header</Book.Header> // I want to render this in 
         // Book.Header 
      >
      </Book>
    </div>
  );
}

One way you could try exporting is using module.exports = Book. And then importing with: const Book = require("./components/Book"); — MerceneX
– MerceneX, Commented Mar 24, 2020 at 18:45
why not just export a constant variable that references your book and header components respectively. const Book = { Book: BookComponent, Header: HeaderComponent } and then just default export it. export default Book — John Ruddell
– John Ruddell, Commented Mar 24, 2020 at 19:18
Alternatively you could also just do a named export which is a more standard practice. export const BookHeader = () => {...} keep the default book export and then your import would be import Book, { BookHeader } from './components/book' — John Ruddell
– John Ruddell, Commented Mar 24, 2020 at 19:22

Sachihiro · Accepted Answer · 2020-03-24 19:37:47Z

1

It has to be Class based component in order to extend the functionality of that component, in this case your Book component would look something like this:

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      header: this.props.children // path to children
    };
  }
  render() {
    const { header } = this.state;
    return (
      <div>
        <Book.Header header={header}/>
      </div>
    );
  }
}

Book.Header = ({header}) => (
  <div>
    <p>{Header}</p>
  </div>
);

answered Mar 24, 2020 at 19:37

Sachihiro

1,8234 gold badges27 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MerceneX · Accepted Answer · 2020-03-24 18:55:06Z

0

Book & Header

const Book = () => (
  <div className="book">
    <Book.Header />
  </div>
);

Book.Header = () => (
  <div><p>This is the header</p></div>
);

module.exports = { Book, Header };

And the App.js

const Book = require = ("./components/Book");
function App() {
  return (
    <div className="App">
      <Book.Book
        <Book.Header>My book header</Book.Header>
      >
      </Book.Book>
    </div>
  );
}

Try this. I am not fully sure about the require part if it works in React, it does in my Node apps. If it does not work, look into how to import the exported modules via the "module.exports = ..." way :)

answered Mar 24, 2020 at 18:55

MerceneX

1191 silver badge10 bronze badges

Collectives™ on Stack Overflow

Exporting multiple non functional components in React js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related