Passing object as props to jsx

reactjs jsx react-props
Sabrina picture Sabrina · Mar 3, 2018 · Viewed 74k times · Source

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?

Answer

Mayank Shukla picture Mayank Shukla · Mar 3, 2018

Is this possible?

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

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 wants to pass all the properties as separate prop, write it like this:

<MyJsx {...commonProps} />

Related questions

Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More
Console logging for react?

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/…

Read More
How to Call a Function inside a Render in React/Jsx

I want to call a function inside some embedded html. I tried the following but the function isn't called. Would this be the incorrect way of calling a function inside a render method? import React, { Component, PropTypes } from 'react'; export …

Read More