What is this Syntax called?

[Sarah2003]

Couldn’t figure how what to google to get docs on this :

On the second codeblock on the Expandable component there is a .Header in there, what is this called?

<Expandable>
	<Header> Header </Header>
</Expandable>

<Expandable>
	<Expandable.Header> Header </Expandable.Header>
</Expandable>

[kevinSmith]

Is this some React library?

It would matter how you import it. If you import it as:

import Expandable from 'expandable';

Then if you need Header, it is a property of Expandable so you have to dot into it. You could also import it as a named import, like:

import Expandable, { Header } from 'expandable';

[Sarah2003]

Not from a library it’s an example from an educative.io tutorial :

Example: Building an Expandable Component - Advanced React Patterns With Hooks

Here are some screenshots incase the example is not publicly accessible:

[DanCouper]

@Sarah2003

On the second codeblock on the Expandable component there is a .Header in there, what is this called

Object property, there’s no special syntax

const Expandable = {
  Header: "I'm a header",
}

So Expandable.Header in this case has the value “I’m a header”.

---

Edit: Note that everything that isn’t a primitive (eg numbers, strings, booleans) in JS is an object, so arrays, functions, maps, sets etc are all objects. So you may well see code like:

const Expandable = (props) => {
  return <div>{props.children}</>
}

const Header = (props) => {
  return <h1>{props.title}</h1>
}

Expandable.Header = Header;

It’s exactly the same thing, albeit slightly confusing. You have an object Expandable. That’s a function (React component). It also has a property Header, which is also a function.

[kevinSmith]

@Sarah2003

Not from a library it’s an example from an educative.io tutorial :

I can’t see the material because it is behind a paywall.

But it is either a library or local code being imported - but it is the same. It is the same thing with React, for example. If I want to use React’s useState hook, I can import it like:

import React from 'react';

And then I have to access useState as a property, as React.useState.

---

Or I could do this:

import React, { useState } from 'react';

And then I have to access useState as a property, as useState.

---

I could probably also do something like:

import React from 'react';
const useState = React.useState;

or

import React from 'react';
const { useState } = React;

And then I have to access useState as a property, as useState.

---

It’s all about how JS objects and modules work.

I tend to prefer the second option, but I commonly see the first example.

[Sarah2003]

Thank you so much for the help.

[Sarah2003]

Thank you so much for the help.