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?

Atalaya

Yes. <MyJsx myObjProps={commonProps} /> – Alysa

Check this stackblitz.com/edit/react-jwxzth – Indisposed

Answer 1

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} />

Capitulary

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 – Atalaya

updated the answer, please check. Write it like this: <MyJsx {...commonProps} /> – Capitulary

just what I needed – Atalaya

Yes! Else I ended up doing things like <p>{props.props.hello}</p> – Scyros

What about a single value? Instead of <Component prop1={prop1} />, something like <Component {...prop1} /> Can't get it working. – Fencesitter

it's destructuring it, which if it's a string would be the same as saying const prop1 = 'string' <Component {...prop1} /> // is the same as <Component s='s' t='t' r='r' i='i' n='n' g='g' /> Or const prop1= {name:'dave', id:'123abc'} <Component {..prop1} /> // is the same as <Component name={prop1.name} id={prop1.id}/> – Drue

Answer 2

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.

Satterfield

This trick allowed me to switch 10 lines of code for 1. Much appreciated! – Velate

+1. Very cool. Just beware: github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… – Mantra

Answer 3

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'}]} />

Subantarctic

Answer 4

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} />

Chomp

Answer 5

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

Conventionalism

Answer 6

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

use double braces as follows

<Message  {{object}}/>

Child

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

Stamford

Answer 7

I had for some object types errors in typescript. as const helped here.

const myprops = { YOUR OBJECT } as const

Donata