Code Editor
Web Browser

A render function must have a return statement. However, that isn't all that it can have.

A render function can also be a fine place to put simple calculations that need to happen right before a component renders. Here's an example of some calculations inside of a render function:

var Random = React.createClass({ render: function () { // First, some logic that must happen // before rendering: var n = Math.floor(Math.random()*10+1); // Next, a return statement // using that logic: return <h1>The number is {n}!</h1>; } });

Watch out for this common mistake:

var Random = React.createClass({ // This should be in the render function: var n = Math.floor(Math.random()*10+1); render: function () { return <h1>The number is {n}!</h1>; } });
Report a Bug
If you see a bug or any other issue with this page, please report it here.