FAQ: Components and Advanced JSX - Use a Variable Attribute in a Component

Frequently Asked Questions JavaScript FAQ
1

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

This community-built FAQ covers the “Use a Variable Attribute in a Component” 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 Use a Variable Attribute in a Component

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

image
image.png786×498 45.3 KB

How come a carriage return after ‘return’ causes an error? I thought white space in JS was irrelevant. This seems like a bug in the solution parsing on your autograder.

1 Like
3

I have:

  • 2 objects {owl, redPanda}
  • 2 components made from those obj

Can I pack 2 those two components in ReactDOM.render or…
Or it’s not possible due to Virtual DOM limitations?

const pandaHook = document.getElementById("panda");

ReactDOM.render(

<React.StrictMode> <RedPanda />,

<App /> </React.StrictMode>,

pandaHook);

const owlHook = document.getElementById("owl");

ReactDOM.render(

<React.StrictMode> <Owl />,

<App /> </React.StrictMode>, owlHook);
4

I’m wondering, why can’t the class contain a variable with attributes such as:

const owl = {

  title: 'Excellent Owl',

  src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'

};

I’ve tried rendering it by accessing it with this.owl.src and also Owl.owl.src (the class component name: Owl) but both won’t render. Does it have something to do with Component classes?

5

Opening parantese must come after (near) return keyword,like that:
return (

6

I get a fail on step 3 and I don’t see why… Any idea?

  • Nest an <h1></h1> inside of your <div></div> .

Inside of the <h1></h1> , put owl.title . Remember, you will have to use curly braces to access owl.title , since it is a JavaScript property.

Don’t forget to wrap the whole multiline JSX expression in parentheses!

class Owl extends React.Component {
  render() {
    return (
      <div>
        <h1>{owl.title}</h1>
      </div>
    );
  }
}
7

I’m new in learning React. I would like to know why this code does not work and i can not go ahead in the next step. this fail in step 4.

import React from 'react';
import ReactDOM from 'react-dom';
const owl = {
  title: 'Excellent Owl',
  src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'
};

// Component class starts here:
class Owl extends React.Component {
  render() {
    return (
      <div>
        <h1>{owl.title}</h1>
        <img 
          src={owl.src}
          alt={owl.title} />
      </div>
    );
  }
}

ReactDOM.render(
  <owl />,
  document.getElementById('app')
);
8

In the ReactDOM.Render call, your first argument should be capitalized, like your class name.

1 Like
9

If I understand correctly, the JavaScript parser will ‘fill in missing semicolons’ at the end of a line if it thinks they are missing. So to the parser, this code actually says:

return;
(
  <div>
     ... etc
  </div>
)

So basically it reaches the return statement and ‘returns nothing’, skipping all code that follows it. Having the parentheses on the same line as the return keyword instructs the parser that it should ‘return everything inside these parentheses’.

Bit late, hopefully you’ve already found the answer, if not I hope my explanation helped