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