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.
Instructions
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:
- an
src
ofowl.src
- an
alt
ofowl.title
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')
.