FAQ: Components and Advanced JSX - Put Logic in a Render Function

Frequently Asked Questions React.js FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Put Logic in a Render Function” exercise from the lesson “Components and Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise Put Logic in a Render Function

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Hi, I don’t really understand why n has to declared in the render() for it to work.

It does not make sense logically if n is declared in the class component as it will always be a static value once the class component is called, but I would still expect it to run.

I copied the code to my IDE and it doesn’t run.

3

Hi everyone,

I was brushing up on my react stuff and when working through this particular exercise the last step:

6.

At the bottom of the file, use ReactDOM.render() to render an instance of Friend . Use the example code as a guide.

I was wondering why my initial code wasn’t being accepted:

ReactDOM.render(<friend /> document.getElementById('app')

The error I was getting was that the first argument had to be <Friend />

however in the code I’d written (AND as per exercise instructions) the class has friend written in lower case;

// New component class starts here:

class friend extends React.Component {

  render() {

    const friend = friends[1];

    return (

      <div>

      <h1>{friend.title}</h1>

      <img src={friend.src} />

      </div>

    

    );

  }

}

is this a bug in the exercise or when calling the class to be rendered does it always have to be Capitalised?

Thanks!

4

I am not sure why we used the injection {friend.title}, the object name is friends.
why?

5

Hi there! Hopefully you already have an answer, if not hopefully I can give some clarity.

It is considered a convention of naming Classes to always use UpperCamelCase, in order to distinguish classes from other objects. This isn’t strictly built into the language, but is a best practice used my a majority of developers.

Naming Conventions - Java/JavaScript

Also in

ReactDOM.render(<friend /> document.getElementById('app')

there is a comma (,) missing from after the component argument. It should look like so:

ReactDOM.render(<friend />, doument.getElementById('app');
6

Hiya! :wave:

The injection of {friend.title} is used because in the lines above we assigned one of the elements of the friends object to a variable, friend.

const friend = friends[1];

So when injecting the JavaScript we are injecting that specific object of the array of friends objects, and accessing that specific title.
It’s kinda like saying ‘I want to access this friend’s title’. If we used friends.title there would be an error because title is not a property of the friends object.

Hope this helps clear it up, if not hit me up and I can try explain a little better, its still early in the morning for me :sweat_smile: