The Spread Syntax

This is syntax that lets you create a new object based on existing ones.

One

Let's say you have a state hook in your code:

const [person, setPerson] = useState({})

Inside of the state hook, it has a few things like:

{
  firstName: 'Barbara', 
  lastName: 'Hepworth', 
  email: 'bhepworth@sculpture.com'
}

Two

You can then create a function that lets you change the hook.

function handleFirstNameChange(e) {
  setPerson(
    {
      ...person,
      firstName: e.target.value
    }
  )
}

Default and Named Exports

A file can only have one default export, but can have multiple named exports.

Default Exports

Export

export default function Button() {}

Import

import Button from './button.js'

Named Exports

Export

export function Button() {}

Import

import { Button } from './button.js'

When writing a default import, you van write any name you want after import. With named imports, the name has to match on both sides.