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

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!

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

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);

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?