37

Official ReactJs documentation recommends to create components following the dot notation like the React-bootstrap library:

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

It is very easy to create this structure with the help of a class component:

const CardBody = ({ children }) => <div className='body'>{children}</div>;

class Card extends Component {
  static Body = CardBody;

  render() {
    return (
      <div className='card'>{this.props.children}</div>
    );
  }
}

But it's also recommended to use as much as possible functional component. Unfortunately I don't know how to achieve this using only functional component.

If I follow this way, I'm no more able to use Card as a component because he is now an object of components:

const Card = {
  Component: CardComponent,
  Body: CardBody
}

export default Card

I'd have to use it that way, and it's not really what I want:

<Card.Component>
  <Card.Body>
  ...

Do you have any idea how to do that?

johannchopin
  • 13,720
  • 10
  • 55
  • 101
  • 3
    people tend to forget that the `class` in JS is just syntax sugar for a normal function. – yqlim Mar 27 '20 at 09:22

3 Answers3

68

In function component you can do like so:

// Card.react.js
const Card = ({ children }) => <>{children}</>;
const Body = () => <>Body</>;

Card.Body = Body;
export default Card;

// Usage
import Card from "./Card.react.js";

const App = () => (
  <Card>
    <Card.Body />
  </Card>
);

Or, you can exploit named exports:

// Card.react.js
export const Wrapper = ({ children }) => <>{children}</>;
export const Body = () => <>Body</>;

// Usage
import * as Card from "./Card.react.js";

const App = () => (
  <Card.Wrapper>
    <Card.Body />
  </Card.Wrapper>
);
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
  • 1
    Seems to work well with javascript. But I'm using typescript and this one give me a nice error: `Property 'Body' does not exist on type 'FunctionComponent<{}>'` where `FunctionComponent` is the type of `Card` declared like this `const Card: React.FunctionComponent = ...` – johannchopin Mar 27 '20 at 09:06
  • @johannchopin Thats a different question that you should ask – Dennis Vash Mar 27 '20 at 09:12
  • 1
    Yeah that's true I did't mention typescript in the question so I will ask a new one ;) – johannchopin Mar 27 '20 at 09:19
  • 7
    For the curious that saw this question and have trouble typing this code in TypeScript you can have a look at this question: https://stackoverflow.com/questions/60883388/using-dot-notation-with-functional-component-in-typescript – johannchopin Mar 27 '20 at 10:30
  • Is it smart to use dot notation with annonymous functional components? – gunslingor Dec 15 '22 at 02:21
16

For functional components

const CardBody = ({ children }) => <div className='body'>{children}</div>;

const Card = (props) => (
  <div className='card'>{props.children}</div>
);
Card.Body = CardBody

And then use it like

<Card>
  <Card.Body>
   ....
Vandesh
  • 6,368
  • 1
  • 26
  • 38
  • Thanks for your answer it's was just a question of timing for the validation but I upvoted your answer for your time :) – johannchopin Mar 27 '20 at 09:21
1

Using Functional Components and TypeScript

// Card.tsx
const CardRoot = ({ children }) => <div>{children}</div>;
const CardBody = () => <>Body</>;

export const Card = CardRoot as typeof CardRoot & {
  Body: typeof CardBody;
};
Card.Body = CardBody;

And use like this:

import { Card } from "./Card";

const App = () => (
  <Card>
    <Card.Body />
  </Card>
);
Pawan Kolhe
  • 11
  • 3