Published on

Using the 'three dots' in React to copy-paste

Authors

The three dots is called the spread operator, and it saves you from copy-pasting. There are some other use cases like rest parameters, where you can check in this article.

Spread operator

1. Having too much props to pass

Let's say we have an app where we want to display all the characters from Rick&Morty using its API. So in order, to do that we have our Characters component and our Character component, the first one is in charge of passing all the characters values that have been fetched from the API to the single Character component. So for the purpose of this lesson, I'm not going to go through every detail of this app, just the essential to explain the spread operator.

allCharacters.js
const allCharacters = () => {
return (
{data.map((character) => (
<Character key={character.id} {...character} />
)}
)}

data are all the characters from the serie. So each character has values like gender, name, id, and more.

const Character = ({ name, id, image, gender, species, status, created }) => {}

As you can see there we are destructuring all of our {...characer} previous passed. I say copy paste cause we could easily have passed our props like this

<Character
key={character.id}
id={character.id}
gender={character.gender}
species={character.species} /* etc */
/>

2. Copying our state and modifying it

See any issue with the code below?

import './styles.css'
import { useState } from 'react'
export default function App() {
const [state, setState] = useState({
gender: 'male',
date: '18 / 12 / 2002',
verified: false,
})
const changeVerified = () => {
setState({ verified: !state.verified })
}
return (
<div className="App">
<p>
{state.gender} {state.date} - {state.verified ? 'true' : 'false'}
</p>
<button onClick={changeVerified}>Change verified</button>
</div>
)
}

❗As you can see, our state, which is initially shown as "male 18 / 12 / 2002 - false" in the screen, when changed one attribute inside it, male and date dissapears

Why is this? Because we are not copying our previous state, and we rewriting our current state to only have the verified attribute. In order to fix this, we should use now a spread operator

const changeVerified = () => {
setState({ ...state, verified: !state.verified })
}

Now it works, without deleting our previous state values, we just modify what we are changing, in this case, the *verified attribute.*