Components and Advanced JSX 4/7 ("Put logic in a render function")


<Below this line, add a link to the EXACT exercise that you are stuck at.>
<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

Hi all, this seemed like a pretty straightforward implementation of “Components and Advanced JSX”, lesson 3, step 4. However, no matter how I’ve finagled the return() function at the bottom, I always get the following error:

Friend's' <h1></h1> should contain {friend.title}.

The instructions for this step are:

Inside of the return statement, inside of the <div></div>, write a nested <h1></h1>.`
Inside of the <h1></h1>, inject friend.title.

Has anyone else been stuck here?


var React = require(‘react’);
var ReactDOM = require(‘react-dom’);

var friends = [
title: “Yummmmmmm”,
src: “
title: “Hey Guys! Wait Up!”,
src: “
title: “Yikes”,
src: “

// New component class starts here:
var Friend = React.createClass({
render: function() {
var friend = friends[1];

return (


<do not remove the three backticks above>

Sometimes the session quietly times out. Run you code one more time to be sure it is saved, then refresh the page and Run again.

Hi @mtf

I’ve been refreshing the page, re-running the code, re-formatting it so it appears on one line, etc. for the past 3-4 days, and no dice. I just wish there were a way to skip forward to later lessons in the case of bugs like this.


Just for the fun of it, try using friends[0] or friends[2].

1 Like

I just completed this part, I tried each they all worked

I just tried friends[0] (changing nothing else) and it worked.

1 Like

Update: and now on the final step of the lesson, I can change it back to friends[1] or friends[2] and it runs perfectly.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.