Use Multiline JSX in a Component

In this lesson, you will learn some common ways that JSX and React components work together. You’ll get more comfortable with both JSX and components, while picking up some new tricks.

Take a look at this HTML:

How might you make a React component that renders this HTML?

Select QuoteMaker.js to see one way of doing it.

The key thing to notice in QuoteMaker is the parentheses in the return statement, on lines 6 and 18. Until now, your render function return statements have looked like this, without any parentheses:

However, a multi-line JSX expression should always be wrapped in parentheses! That is why QuoteMaker‘s return statement has parentheses around it. 

Instructions

1.Here’s another quote, formatted in the same way:

In app.js, write a React component that renders this HTML. Render your component using ReactDOM.render().

Use QuoteMaker.js as a guide! Remember to import React and ReactDOM at the top of the file, and remember to ReactDOM.render() your component at the bottom of the file.

If you don’t like this quote, feel free to use a different one.

QuoteMaker.js