Passing object as props to jsx
ReactjsJsxReact PropsReactjs Problem Overview
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?
Reactjs Solutions
Solution 1 - Reactjs
> 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} />
Solution 2 - Reactjs
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.
Solution 3 - Reactjs
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'}]} />
Solution 4 - Reactjs
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} />
Solution 5 - Reactjs
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