Embedded Files
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
Instructions
1.Let’s make a render() function with some logic in it.
On lines 1 and 2, import React and ReactDOM.
2.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>
);
}
3.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.
4.Inside of the return statement, and inside of the <div></div>, write a nested <h1></h1>.
Inside of the <h1></h1>, inject friend.title.
5.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}.
6.At the bottom of the file, use ReactDOM.render() to render an instance of Friend. Use the example code as a guide.
app.js
app.js
const friends = [
{
title: "Yummmmmmm",
src: "https://content.codecademy.com/courses/React/react_photo-monkeyweirdo.jpg"
},
{
title: "Hey Guys! Wait Up!",
src: "https://content.codecademy.com/courses/React/react_photo-earnestfrog.jpg"
},
{
title: "Yikes",
src: "https://content.codecademy.com/courses/React/react_photo-alpaca.jpg"
}
];
// New component class starts here:
Page updated
Report abuse