why need to use spread operator when passing props

Question

Below is the code:

const Info = (props) => (
    <div>
        <h1>Info</h1>
        <p>The info is: {props.info}</p>
    </div>
);

const withAdminWarning = (WrappedComponent) => {
    return (props) => (
        <div>
           <p>This is private info. Please don't share!</p>
           <WrappedComponent {...props}/>   // why need to use spread operator?
        </div>
    );
};

const AdminInfo = withAdminWarning(Info);

ReactDOM.render(<AdminInfo info="There are the details" />, document.getElementById('app'));

what I don't understand is, why it has to be :

 <WrappedComponent {...props}/>

and I can't pass an object as:

const temp = {info: "There are the details"}
<WrappedComponent temp/>

isn't that {...props} an object too?

`` is same as ``, so if you want to pass an object write it like this: `` or `` and check the linked answer for `{...props}` part, very well explained. — Mayank Shukla, Apr 09 '19 at 14:12
Short answer is it is simply to be able to pass all the `props` from current component to another component so you can easily access any of them without having to write them all out manually or even worry what their names are — charlietfl, Apr 09 '19 at 14:13
`withAdminWarning` is a function that gets a `Component`, does something with it, and returns *another* component. But you want that component to still have the props. You could do this: ```javascript ``` But also, you could use the `spread operator` syntax to achieve the same thing: ```javascript ``` By the way, this pattern is known as `High Order Components` and you can find all you need about this here: https://reactjs.org/docs/higher-order-components.html — Luciano Semerini, Apr 09 '19 at 14:22

Nils Fahle · Answer 1 · 2019-04-09T14:25:29.773

-1

You don't need to use the spread operator, you can also do something like

const temp = { info: "There are the details }
<WrappedElement temp={temp} />

You can later access it with props.temp.info

edited Apr 09 '19 at 14:25

answered Apr 09 '19 at 14:11

Nils Fahle

75
1
10

tried that, didn't work – Apr 09 '19 at 14:16
@slowjams Sorry, my bad. I fixed it now – Nils Fahle Apr 09 '19 at 14:27

why need to use spread operator when passing props

1 Answers1