Using dot notation with functional component

Question

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?

people tend to forget that the class in JS is just syntax sugar for a normal function. — yqlim
– yqlim, Commented Mar 27, 2020 at 9:22

Dennis Vash · Accepted Answer · 2021-09-07 11:58:37Z

81

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

edited Sep 7, 2021 at 11:58

answered Mar 27, 2020 at 8:58

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

5 Comments

johannchopin Over a year ago

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

Dennis Vash Over a year ago

@johannchopin Thats a different question that you should ask

johannchopin Over a year ago

Yeah that's true I did't mention typescript in the question so I will ask a new one ;)

johannchopin Over a year ago

For the curious that saw this question and have trouble typing this code in TypeScript you can have a look at this question: stackoverflow.com/questions/60883388/…

gunslingor Over a year ago

Is it smart to use dot notation with annonymous functional components?

Vandesh · Accepted Answer · 2021-11-03 14:18:46Z

20

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

edited Nov 3, 2021 at 14:18

answered Mar 27, 2020 at 8:59

Vandesh

6,9642 gold badges32 silver badges38 bronze badges

1 Comment

johannchopin Over a year ago

Thanks for your answer it's was just a question of timing for the validation but I upvoted your answer for your time :)

Pawan Kolhe · Accepted Answer · 2023-06-25 05:12:37Z

11

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

answered Jun 25, 2023 at 5:12

Pawan Kolhe

1111 silver badge5 bronze badges

Comments

GMKHussain · Accepted Answer · 2023-10-12 13:48:28Z

3

Function component with Table example

// Table.js
import React from 'react'

const Table = (props) => <div className='table'>{props.children}</div>
const Row = ({ children }) => <div className='tr'>{children}</div>
const Cell = ({ children }) => <div className='td'>{children}</div>

Table.Row = Row
Table.Cell = Cell

export default Table

// Something.js
import Table from 'Table.js'

const Something = () => {
  return(<>
    <Table>
      <Table.Row>
        <Table.Cell>Td 1</Table.Cell>
        <Table.Cell>Td 2</Table.Cell>
      </Table.Row>
    </Table>
  </>)
}

export default Something

answered Oct 12, 2023 at 13:48

GMKHussain

4,8231 gold badge36 silver badges22 bronze badges

Collectives™ on Stack Overflow

Using dot notation with functional component

4 Answers 4

5 Comments

For functional components

1 Comment

Using Functional Components and TypeScript

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

For functional components

1 Comment

Using Functional Components and TypeScript

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related