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>; } };
In the above example, the line with the const n
declaration will cause a syntax error, as it should not be part of the class declaration itself, but should occur in a method like render()
.
Instructions
Let’s make a render()
function with some logic in it.
On lines 1 and 2, import React
and ReactDOM
.
Starting on line 20, create a new component class named Friend
. Remember, the component class declaration syntax is class YourClassName extends React.Component {}
Give your component class the following render function:
render() { return ( <div> </div> ); }
Inside the body of the render function, before the return
statement, declare a new variable named friend
.
Set friend
equal to either friends[0]
, friends[1]
, or friends[2]
, depending on which friend sounds most appealing to you.
Inside of the return
statement, and inside of the <div></div>
, write a nested <h1></h1>
.
Inside of the <h1></h1>
, inject friend.title
.
Still inside of the <div></div>
, make a new line after the <h1></h1>
.
On the new line, write an <img />
.
Give the <img />
an attribute of src={friend.src}
.
At the bottom of the file, use ReactDOM.render()
to render an instance of Friend
. Use the example code as a guide.