Learn

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?