FAQ: Components and Advanced JSX - Use Multiline JSX in a Component

This community-built FAQ covers the “Use Multiline JSX 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 Multiline JSX 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!

import React from 'react';
import ReactDOM from 'react-dom';

class QuoteMaker2 extends React.Component{
 render(){
 return
  ( <blockquote>
  <p>
    What is important now is to recover our senses.
  </p>
   <cite>
     <a target="_blank" 
       href="https://en.wikipedia.org/wiki/Susan_Sontag">
      Susan Sontag
    </a>
  </cite>
 </blockquote>)}
 };

  const app = document.getElementById('app')
   ReactDOM.render(<QuoteMaker2 />, app )

I can’t find the reason why it doesnt render

1 Like

Why doesn’t this work?? The error says that I need to render a

but that’s what I think I’m doing…
import React from 'react';
import ReactDOM from 'react-dom';

class QuoteMakerTwo extends React.Component {
  render() {
    return (
      <blockquote>
        <p>
          What is important now is to recover our senses.
        </p>
        <cite>
          <a target="_blank" 
            href="https://en.wikipedia.org/wiki/Susan_Sontag">
            Susan Sontag
          </a>
        </cite>
      </blockquote>
    );
  }
};

ReactDOM.render(
  <QuoteMakerTwo />,
  document.getElementById('app')
);