By Guille Acosta

2018-09-14 15:21:43 8 Comments

Hi there I have a lot of react components looking like:

<MyComponent content={content} />

I'm looking for some kind of writing the same but abbreviated, now that if I only add content prop that means content it's true but in my case I want to pass an object.



@Jonas Wilms 2018-09-14 16:36:56

As mentioned that can be shortened a bit with the spread operator:

 <MyComponent {...{content}} />

@Tim B James 2018-09-14 15:30:26

To build on @Adam 's answer.

You can define your properties as a const;

const content = // some code;
const myProps = {

Notice that if I have a property which matches the property on the component, then you can just do it that way. Otherwise you can create it as;

const otherProperty ...
const myProps = {
    content: otherProperty

Then using "Spread syntax" apply the properties to the component;

<MyComponent {...myProps} />

@Arup Rakshit 2018-09-14 15:33:14

defining the content and then creating an object myProps to use props spread is too much, instead of writing content={content} .. :)

@epascarello 2018-09-14 15:40:06

@ArupRakshit well not many options so this is one way :) Sometimes doing what you want requires writing more code than it would take to do it the other way. :)

@Jonas Wilms 2018-09-14 16:38:07

@espascarello if done right this can actually save 3 chars :)

@Tim B James 2018-09-17 07:28:00

@ArupRakshit Yeah in this instance it is major overkill, however it is a way for building up a more complex object for future use.

@Adam 2018-09-14 15:24:34

You can use the spread operator, like so:

<MyComponent {...props} />

@Arup Rakshit 2018-09-14 15:30:11

this is not what the OP asked.

@Arup Rakshit 2018-09-14 15:37:09

How it got so many upvotes, while this didn't answer the actual question at all? The only direct answer to the question is that no it is not possible for now.

@Jonas Wilms 2018-09-14 16:39:18

@arup well actually if you spread an object literal this saves the repetition.

Related Questions

Sponsored Content

72 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

22 Answered Questions

[SOLVED] How to pass props to {this.props.children}

18 Answered Questions

[SOLVED] .prop() vs .attr()

7 Answered Questions

[SOLVED] Understanding React-Redux and mapStateToProps()

52 Answered Questions

[SOLVED] Loop inside React JSX

  • 2014-04-05 05:29:28
  • Ben Roberts
  • 674091 View
  • 1000 Score
  • 52 Answer
  • Tags:   javascript reactjs

23 Answered Questions

[SOLVED] What is the difference between React Native and React?

28 Answered Questions

[SOLVED] Programmatically navigate using react router

  • 2015-06-26 17:38:51
  • George Mauer
  • 556059 View
  • 1088 Score
  • 28 Answer
  • Tags:   reactjs react-router

4 Answered Questions

[SOLVED] Passing props to react-redux container component

10 Answered Questions

4 Answered Questions

[SOLVED] React + Redux - What's the best way to handle CRUD in a form component?

Sponsored Content