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


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 (


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].


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


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


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.


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