Use a Variable Attribute in a Component

Take a look at this JavaScript object named redPanda: 

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.

Instructions

1.Select app.js.

On lines 1 and 2, import React and ReactDOM.

2.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.

3.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!

4.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:

• an src of owl.src

• an alt of owl.title

5.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').

RedPanda.js

App.js