Overview
A general rule of thumb for returning multiple elements from the render function is to wrap everything with a <div>. Here’s the Egghead Video for you to follow along.
Content
If you try to add multiple html tags in the return statement, the web app will break.
The way to fix things is to wrap everything in a <div /> tag.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Render Method Gotchas</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
</head>
<body>
<script type="text/jsx">
/*** @jsx React.DOM */
var App = React.createClass({
render:function(){
return (
<div>
<h1>Hello World</h1>
<b>bold</b>
</div>
)
}
});
React.renderComponent(<App />,document.body)
</script>
</body>
</html>
OUTPUT:
