{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/spreading-attributes-in-react-using-the-spread-operator/", "result": {"data":{"markdownRemark":{"html":"
You can learn more about the JavaScript spread operator in my blog post here.
\n

First, let’s understand one of the interesting use cases of the JavaScript spread operator.

\n

Below, we have a person object.

\n
const person = {\n  firstName: "Hemanta",\n  lastName: "Sundaray",\n  occupation: "developer",\n  location: "New Delhi",\n}
\n

First, we will destructure the firstName property and then use the JavaScript spread operator to put the remaining properties and values in an object called rest (line 8).

\n
const person = {\n  firstName: "Hemanta",\n  lastName: "Sundaray",\n  occupation: "developer",\n  location: "New Delhi",\n}\n\nconst { firstName, ...rest } = person\n\nconsole.log(firstName)\n// Hemanta\n\nconsole.log(rest)\n// {  lastName: "Sundaray", occupation: "developer",location: "New Delhi"}
\n

Now, let's understand how we can use the spread operator usage that we described above in React.

\n

In React, sometimes we want to be able to customise an element rendered by a component; so, we don’t know the exact number of props the component is going to receive in advance. This will be clear with the following example.

\n

Below, we have a Button component (rendered inside the App component) that receives three props: children, type and disabled.

\n
import React from "react"\n\nconst Button = ({ children, type, disabled }) => {\n  return (\n    <button type={type} disabled={disabled}>\n      {children}\n    </button>\n  )\n}\n\nconst App = () => {\n  return (\n    <div className="m-5">\n      <Button type="submit" disabled={true}>\n        Submit\n      </Button>\n    </div>\n  )\n}\n\nexport default App
\n

Let’s say, for example, we want to add another prop called className so that we are able to customise the button element by adding CSS rules. One solution would be to simply add the className prop to the Button component rendered inside the App component and then destructure the className prop in the Button component.

\n

However, there is a better solution.

\n

We will destructure the children prop from the props object and put the remaining properties in an object called rest using the spread operator (line 3). We can then pass these props to the button element by spreading the rest object (line 4).

\n
import React from "react"\n\nconst Button = ({ children, ...rest }) => {\n  return <button {...rest}>{children}</button>\n}\n\nconst App = () => {\n  return (\n    <div className="m-5">\n      <Button type="submit" disabled={true}>\n        Submit\n      </Button>\n    </div>\n  )\n}\n\nexport default App
\n

Now whenever we will pass the className prop or any other prop to the Button component, they will get automatically passed to the button element without us having to manually add them one by one.

\n","frontmatter":{"title":"Spreading Attributes in React Using the Spread Operator","date":"2021-07-01"}}},"pageContext":{"slug":"/spreading-attributes-in-react-using-the-spread-operator/","prev":{"fields":{"slug":"/javascript-object-methods/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/advanced-array-destructuring-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}