Creating React Components with the Spread Operator

Photo by Clément H on Unsplash

As most coders know, how you format code matters, a lot. Consider the following React component:

It’s what most React developers are used to. But that doesn’t mean it’s an optimal way of conveying information to the React component.

What if, instead, we conveyed all of those properties in the format that’s most commonly used to convey information in JavaScript, the Object? Then, it would look like this:

Advantages

I’ve found component spread operators:

1. easier to work with
2. help with IDE autocompletion
3. are simpler to copy/paste
4. template literals
   instead of needing
   key={`this is a template literal`}
   you can write:
   key: `this is a template literal`
5. object property value shorthand
   instead of value={value} you can just write value

That’s it! This essay is a contribution from Ecstatic Engineering at ecstatic.com. If you’re a curious engineer, live in (or want to move to) Vancouver, British Columbia, and would like to do great work in an amazing environment with wonderful people, reach out!

© 2020 Ecstatic Life Inc under an Attribution-NonCommercial 4.0 International Creative Commons licence.