Spread Component Props in JSX with React
You often find duplication between the name of a prop and a variable you will assign to the prop. JSX allows you to spread an object containing your named props into your Component which enables you to avoid the repetition of matching prop names and variable names. This lessons covers spreading JSX component props in both pure components and class components.
Instructor: [00:00] It's a fairly common scenario to have a component which takes some props. When you go to define it -- let us create our new component -- you have those props.
[00:09] You just assign them to the same exact name, so name and name there where the greeting is the same name as the variably you're passing in. The name variable's the same as the prop up there, so there's a bit of duplication going on here.
[00:24] What you can actually do to avoid some characters there is just to use the curly braces, without defining a prop name, and then write another object inside of there and spread that object. This looks like this greeting and name.
[00:39] You see that works the exact same way, where this is an object that's just being spread out across the named props of the demo.
[00:46] You could actually change the way you think about this if this looks confusing. I'm just going to invoke my demo function with an object and hit save.
[00:56] You see this is the same result, because it's just demo taking an object where the props are named the same as these variables up here. The JSX syntax to accomplish that is again demo, the curly braces, and then you spread an object with those names.
[01:15] Now, this looks a little bit different with classes, class demo extend React.Component. Then, I render out in my render method, and I return an H2 with this.props.greeting and this.props.name. I'll hit save and everything works the same.
[01:37] Now, the equivalent of JavaScript is a little bit different, because this no longer works where you do invoking a function and passing an object.
[01:47] This is a class, so you think maybe I can do new demo. That also doesn't work, because what you need to do is use React.createElement. Then the demo is the type, and the props are the second parameter there. You can see now it's back to the way it was.
[02:08] This object, whether it's through createElement or invoking a function for a peer component, is the equivalent in JSX to using JSX writing those curly braces without a prop name, then passing an object in and spreading it.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!