Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn
Components and Advanced JSX

Put Logic in a Render Function

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:

class Random extends React.Component { render() { // First, some logic that must happen // before rendering: const 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:

class Random extends React.Component { // This should be in the render function: const n = Math.floor(Math.random()*10+1); render() { 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.