How to render ReactJS with component name and its props?

Question

Working version

// Load from defined component
const TextField = require('textfield');

render: function() {
  <div>
   <TextField label='sample' defaultValue='default' placeholder='type your value' />
  </div>
}

Improved version, but not working

And then I have so many TextField, so I refactor my code to create the props in a more generic way. Then, I expect kind of things like this will work, but it won't:

render: function() {
  <div>
   // This not working but raised error: Objects are not valid as a React child (found: object with keys: {label, defaultValue, placeholder}
   React.createElement(TextField, this._getPropsForField('sample'))
  </div>
},

_getPropsForField: function(fieldName) {
  // Initialize data for fieldName, but return a mock for now
  return {
    label: 'sample',
    defaultValue: 'default',
    placeholder: 'placeholder'
  };
}

I also tried:

TextField(this._getPropsForField())

But it didn't work with the same error.

I appreciate any help or suggestion, thank you guys!

azium · Accepted Answer · 2016-05-19 18:14:37Z

1

You can pass a whole set of props using the spread operator, which has a kind of special use case in JSX.

<TextField { ...(_getPropsForField('field')) } />

Example

answered May 19, 2016 at 18:14

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hieu Pham Over a year ago

Yes, ... does the magic! Any other options to make it work?

wintvelt · Accepted Answer · 2016-05-19 18:37:01Z

1

Going full JSX is better, but this line:

React.createElement(TextField, this._getPropsForField('sample'))

You are missing the { } brackets to escape JSX. With them it should work also:

{React.createElement(TextField, this._getPropsForField('sample'))}

answered May 19, 2016 at 18:37

wintvelt

14.1k3 gold badges41 silver badges44 bronze badges

2 Comments

slugo Over a year ago

Shouldn't this be rendered as a string instead of giving an error in the case the {}s are missing?

wintvelt Over a year ago

Yes it should. But the string would not raise the error :) I guess the original code that raised the error was different than in your question.

Linh Dam · Accepted Answer · 2016-05-19 18:56:12Z

1

I don't know JSX much but I think you can't put React.createElement(TextField, {}) inside <div> (as @wintvelt points out, you have to wrap it inside a {}). So I would use pure JS like this:

render: function() {
  textField = React.createElement(TextField, this._getPropsForField('sample'));

  return React.createElement('div', null, textField);
  // Or this shortcut:
  return React.DOM.div(null, textField);
},

Or with pretty CoffeeScript:

render: ->
  React.DOM.div
    null
    React.createElement TextField, @_getPropsForField('sample')

edited May 19, 2016 at 18:56

answered May 19, 2016 at 18:50

Linh Dam

2,2591 gold badge20 silver badges18 bronze badges

1 Comment

wintvelt Over a year ago

If you put it in {} brackets, you can actually put it inside JSX. JSX code actually compiles to React.createElement().

Collectives™ on Stack Overflow

How to render ReactJS with component name and its props?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related