Exporting functional component (React)

JavaScript
1

Hi there.

I have this following code:

import React from "react";
import { Inner, Container } from "./styles/jumbotron";

export default function Jumbotron({ children, direction= "row", ...restProps }) {
    return (
        <Inner direction={direction}>
            <p>Hello again!</p>
        </Inner>
    )
}

Jumbotron.Container = function JumbotronContainer({ children, ...restProps }) {
    return <Container {...restProps}>{children}</Container>;
}

By the way, Inner and Container are style components.

So, I’m not understanding how I am exporting “Jumbotron.Container” without writing “export default”.

Why am I able to use “Jumbotron.Container” in the following code if I am not importing it?:

import Jumbotron from "./components/jumbotron";
import jumboData from "./fixtures/jumbo.json"

export default function App() {
  return (
    <Jumbotron.Container>
      {jumboData.map((item) => (
        <Jumbotron key={item.id} direction={item.direction}>
          <p>Hello</p>
        </Jumbotron>
      ))}
    </Jumbotron.Container>
  );
}

I guess what I’m struggling with is, what means the dot after a functional component, and why I can put a style component after this dot…

I tried to look this out on the internet but I don´t know how to explain this.

Thanks.

2

In JS, all data that isn’t a primitive is some kind of object. This includes functions. Since functions are objects, they can have properties.

This line:

Jumbotron.Container = function ...

is adding a property onto the object/function that holds another function.

3

Thanks for your response!

Does that mean that when I import this component (in the second code), it already has the property (Container) I added previously?

The way I was seeing it is:

First, we export /create the functional component.
Then, we add a property.

By the time a import this code in another file, I already have the function and its properties?

I think I am confused in which order is the whole thing happening…

4

I think so. And that seems to be the case.

In JS, variables referring to non-primitives are really references (addresses) to that spot in memory. That is why JS calls them “reference types”. So you are exporting a reference to that spot in memory and then you are changing the data at that spot in memory. If I have a 2 room house and then give someone my address and then I add a room, when my friend visits he will see 3 room house - it doesn’t matter that the house had 2 rooms when I gave them the address. It is not a separate house. When I export a reference, the import stores a copy of the reference. It doesn’t make a complete copy of what the reference is pointing to. Just like adding a room to my house just modifies the house, it doesn’t create a completely new house.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.