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?

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

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

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