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

64 Answered Questions

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

49 Answered Questions

[SOLVED] Loop inside React JSX

  • 2014-04-05 05:29:28
  • Ben Roberts
  • 572179 View
  • 819 Score
  • 49 Answer
  • Tags:   javascript reactjs

18 Answered Questions

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

6 Answered Questions

[SOLVED] Understanding React-Redux and mapStateToProps()

25 Answered Questions

[SOLVED] Programmatically navigate using react router

  • 2015-06-26 17:38:51
  • George Mauer
  • 450506 View
  • 873 Score
  • 25 Answer
  • Tags:   reactjs react-router

18 Answered Questions

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

4 Answered Questions

[SOLVED] Passing props to react-redux container component

4 Answered Questions

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

4 Answered Questions

[SOLVED] React-Native - Custom navigation with Navigator component

2 Answered Questions

[SOLVED] reactjs, how to pass props at the class level

Sponsored Content