How to use `React.createElement` children parameter (without jsx)

Question

React.createElement takes a spread "children" parameter

var d = React.DOM;

React.createElement(LabeledElement, {label: "Foo"}, 
     d.input({value: "foo"})
)

but I can't find any documentation on how to actually use it

var LabeledElement = React.createClass({
    render: function() {
        return d.label({}
            ,d.span({classNames: 'label'}, this.props.label)
            , //How to place children here? 
    }
})

I'm sure this has a really really simple answer.

James K Nelson from Frontend Armory wrote a n excellent article about how to use the children property: frontarm.com/james-k-nelson/4-ways-pass-children-react-elements — mmichaa
– mmichaa, Commented Sep 11, 2020 at 10:48
React Enlightenment (Written by Cody Lindley – Sponsored by Frontend Masters) has an article about how to use the children property: reactenlightenment.com/react-nodes/4.2.html — mmichaa
– mmichaa, Commented Sep 11, 2020 at 13:12

Michelle Tilley · Accepted Answer · 2015-05-12 16:16:44Z

64

The children passed to a component, either via JSX nesting or via the third+ argument to React.createElement, shows up in the component as this.props.children:

var MyLabel = React.createClass({
  render: function() {
    return React.createElement("label", {className: "label"},
      React.createElement("span", {className: "label"}, this.props.label),
      this.props.children
    );
  }
});

var App = React.createClass({
  render: function() {
    return React.createElement(MyLabel, {label: "Here is the label prop"},
      React.createElement("div", {},
        React.createElement("input", {type: "text", value: "And here is a child"})
      )
    );
  }
});

Example: http://jsfiddle.net/BinaryMuse/typ1f2mf/; docs: http://facebook.github.io/react/docs/multiple-components.html#children

edited May 12, 2015 at 16:16

answered May 12, 2015 at 16:06

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

4 Comments

George Mauer Over a year ago

Ah thanks. Never thought to look inside of props

Matin Over a year ago

how can we have 'style' as our prop for the child element. for example the child element is a paragraph tag and we want to specify a style like 'color: red' for it. can you help me please with it?

Matin Over a year ago

@MichelleTilley hi again. sorry but i used this piece of code and it threw an error saying " 'p' is not defined". p needs quotation just like your original answer but also after putting quotation, it doesn't work, saying "Style prop value must be an object". here is my code: React.createElement('div', null, React.createElement('p', { style: "color: red" }), "Hello John") the error message in UI: Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. please pay attention to my next reply.

Matin Over a year ago

@MichelleTilley but when i change the code above to this: React.createElement('div', null, React.createElement('p', { style: { color: 'red' } }), "Hello John") ,it compiles successfully and the UI is what i expect to see except changing the color of that text to red. i mean the style doesn't actually work again. so i will really appreciate if you know how to use styles properly in this situation in React.

Anil · Accepted Answer · 2021-12-17 07:25:32Z

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
var MyLabel = React.createClass({
  render: function() {
    return React.createElement("label", {className: "label"},
      React.createElement("span", {className: "label"}, this.props.label),
      this.props.children
    );
  }
});

var App = React.createClass({
  render: function() {
    return React.createElement(MyLabel, {label: "Here is the label prop"},
      React.createElement("div", {},
        React.createElement("input", {type: "text", value: "And here is a child"})
      )
    );
  }
});

answered Dec 17, 2021 at 7:25

Anil

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use `React.createElement` children parameter (without jsx)

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related