Add props as an HTML attribute in a React.js component

Question

I recently started using Next.js and Tailwindcss. I want to create a custom component that can be used as follows -

<CustomComponent> Hello World </CustomComponent>

While searching for how to use this, I came across an answer which said -

const CustomComponent = props => {
  return (
    <>
      <div {...props} className="text-red-900" />
    </>
  )
}

In my example, the CustomComponent will simple make the text-color to a shade of red.

I can now use this component as <CustomComponent> Hello World </CustomComponent>.

What I don't understand is this line - <div {...props} className="text-red-900" />. I couldn't find anything like this in the reactjs docs.

Is this an appropriate way of passing props as HTML attributes? How does it work?

Dennis Vash · Accepted Answer · 2020-03-24 13:07:29Z

4

Here are equivalent components:

const CustomComponent = (props) => {
  return <div className="text-red-900" {...props} />;
};

// props={prop1,prop2,className}
const CustomComponent = ({ ...props }) => {
  return <div className="text-red-900" {...props} />;
};

const CustomComponent = ({ prop1, prop2, className }) => {
  // className will be overridden if its valid
  return <div className="text-red-900" prop1={prop1} prop2={prop2} className={className} />;
};

Note that better to use spread syntax (for object literals) after the inline style (className) which makes it more generic.

As for why spreading the property is a valid syntax?

You have a Spread Attributes explained in the docs, remember that JSX is converted to React.createElement which accepts the props as an argument.

JSX In Depth

edited Mar 24, 2020 at 13:07

answered Mar 24, 2020 at 12:53

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deniz Over a year ago

Some people consider props spreading as an anti-pattern: vhudyma-blog.eu/react-antipatterns-props-spreading

Dennis Vash Over a year ago

All claims in this blog arent so accurate when you use types which is basically every modern project.

Collectives™ on Stack Overflow

Add props as an HTML attribute in a React.js component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related