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

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

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!

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

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')
);
4 
import React from 'react';
import ReactDOM from 'react-dom';

class QuoteMaker 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(
  <QuoteMaker />,
  document.getElementById('app')
);
5

return
(



The world is full of fake people but at the same time many people help needy people.

     <cite>

         <a target="_blank" 

            href="https://en.wikipedia.org/wiki/Susan_Sontag">

            Susan Sontag

           </a>

           </cite> 

         </blockquote>         

         )

if i put opening parenthese like above my code does not work , why?

6

When you have the return statement like this

return
(

then the compiler has no way of knowing that this is supposed to be a single statement. It will see the return keyword and immediately exit the method/function ignoring whatever is present within the parentheses.
If you put the opening parenthesis on the same line
return (
then the compiler knows that the intent is to return whatever is between the opening and closing parentheses.

1 Like
7

To those doing everything right and it still not working, be aware…

It’s asking you to make your new component in the app.js file rather than in the ‘QuoteMaker.js’ file that you see initially.

Hopefully this saves anyone as illiterate as me the struggle!

1 Like
8

holy crap thank you, I was thinking the ■■■■ thing was bugged. But usually when that is the case, its always me miss reading the instructions. You are a lifesaver here.