Learn

Take a look at this JavaScript object named redPanda:

const redPanda = {
  src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg',
  alt: 'Red Panda',
  width: '200px
};

How could you render a React component, and get a picture with redPanda‘s properties?

Select RedPanda.js to see one way to do it.

Note all of the curly-brace JavaScript injections inside of the render function! Lines 16, 17, and 18 all use JavaScript injections.

You can, and often will, inject JavaScript into JSX inside of a render function.

Select app.js.

On lines 1 and 2, import React and ReactDOM.

Starting on line 10, declare a new component class named Owl. Owl should have a render function that returns an empty <div></div>.

Feel free to use RedPanda.js for guidance.

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!

Still inside of the <div></div>, make a new line after the <h1></h1>.

On your new line, add an <img /> element.

Your <img /> should have two attributes:

At the bottom of the file, use ReactDOM.render() to render an instance of Owl.

ReactDOM.render()‘s second argument should be document.getElementById('app').

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?