Passing object as props to jsx

Question

I have an object contains multiple common key-value props, that I want to pass on to some jsx. Something like this:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

I want this to function as passing individual props:

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

Is this possible?

Check this https://stackblitz.com/edit/react-jwxzth – Jayavel Mar 03 '18 at 06:58 — Jayavel, Mar 03 '18 at 06:58

score 252 · Accepted Answer · edited Sep 15 '21 at 09:36

252

Is this possible?

Yes its possible, but the way you are sending it is not correct.

The meaning of <MyJsx commonProps /> is:

<MyJsx commonProps={true} />

So if you don't specify any value, by default it will take true. To pass the object, you need to write it like this:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

Update:

If you have an object and want to pass all the properties as separate prop, write it like this:

<MyJsx {...commonProps} />

edited Sep 15 '21 at 09:36

Noam Yizraeli

4,446
18
35

answered Mar 03 '18 at 06:57

Mayank Shukla

100,735
18
158
142

3

This is not what I need. I edited my question so it will be more clear. I need the props to be sent as individual props – Sabrina Mar 03 '18 at 07:12
20

updated the answer, please check. Write it like this: `` – Mayank Shukla Mar 03 '18 at 07:17
5

just what I needed – Sabrina Mar 03 '18 at 07:22
1

Yes! Else I ended up doing things like `
{props.props.hello}
` – Juan Lanus Oct 19 '18 at 22:57
What about a single value? Instead of , something like Can't get it working. – Felipe Candal Campos Sep 29 '21 at 19:58
it's destructuring it, which if it's a string would be the same as saying const prop1 = 'string' // is the same as Or const prop1= {name:'dave', id:'123abc'} // is the same as – GeorgeWL Aug 24 '22 at 13:55

score 77 · Answer 2 · edited Dec 20 '19 at 19:36

77

You can use the spread operator to do this.

You can simply do <MyJsx {...commonProps} />

Now what all individual properties you have in commonProps will be sent as individual props to MyJsx.

edited Dec 20 '19 at 19:36

Kaspar Lee

5,446
4
31
54

answered Mar 03 '18 at 07:18

G_S

7,068
2
21
51

5

This trick allowed me to switch 10 lines of code for 1. Much appreciated! – Telmo Trooper Aug 24 '18 at 12:13
3

+1. Very cool. Just beware: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md – Ryan Mar 07 '21 at 17:10

score 19 · Answer 3 · answered Dec 04 '18 at 12:41

You need to use double braces, like this:

messages={{tile:'Message 1'}}

Or to pass many objects:

messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}

It's simply JS syntax inside braces.

A final component might look like this

<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />

score 10 · Answer 4 · answered Apr 25 '19 at 09:41

10

You can pass props as object in two ways:-

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};

1.Using spread Operator:-

<MyJsx {...commonProps} />

2.Simply pass that props:-

<MyJsx commonProps = {commonProps ? commonProps : true} />

answered Apr 25 '19 at 09:41

sneha

435
4
9

score 1 · Answer 5 · answered Mar 10 '21 at 17:57

Can also do something like this:

<MyJsx objectProps={{
    prop1,
    prop2
}}/>

This way you don't have to write prop1: prop1 (if it is a variable or function such as state setState).

It can then be accessed in the component using destructuring: let { prop1, prop2 } = props.objectProps

score 1 · Answer 6 · edited Jan 02 '23 at 10:39

1

const object={name:'xyz',age:50}

use double braces as follows

<Message  {{object}}/>

Child

function Message({object}){  
    //You can get object here.//
}

edited Jan 02 '23 at 10:39

Suraj Rao

29,388
11
94
103

answered Jan 02 '23 at 10:14

kuntal desai

11
1

Passing object as props to jsx

6 Answers6

Linked

Related