React Tutorials — Nesting Elements 1

In this tutorial we will see how to nest one react element inside another. It is very simple. Lets say we want to render the text “Hello World” inside a span, which is itself inside a div.

var helloSpan = React.createElement("span",null,"Hello World");
var mainDiv = React.createElement("div",null,helloSpan);
React.render(mainDiv,document.getElementById("container") );

So as we see we above, to nest one element inside another we pass the element to nest as the third parameter.

Now we see how to nest multiple react elements inside a single react element.

So lets say in the above example we have add another span in the mainDiv.

var helloSpan = React.createElement("span",null,"Hello World");
var helloReactSpan = React.createElement("span",null,"Hello React");
var mainDiv = React.createElement("div",null,[helloSpan,helloReactSpan]);
React.render(mainDiv,document.getElementById("container") );

So we can render multiple children by passing them as an array in the third parameter of createElement.

View JsBin