43

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.

2

2 Answers 2

63

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

4
  • 1
    Ah thanks. Never thought to look inside of props May 12, 2015 at 16:13
  • 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
    Dec 10, 2021 at 17:07
  • @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
    Dec 11, 2021 at 14:29
  • @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.
    – Matin
    Dec 11, 2021 at 14:30
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"})
      )
    );
  }
});

1
  • 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.
    – Community Bot
    Dec 17, 2021 at 8:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.