GoConqr has a new look! Let us know what you think.

16.a React.js

Module 1 · Media Course's Objectives
Module 2 · Media What is React?
Module 3 · Media Create React App
Module 4 · Media Import Install React
Module 5 · Media Create a react component
Module 6 · Media Render HTML or JSX
Module 7 · Media Rendering component to DOM
Module 8 · Media Rendering multiple elements You are here
Module 9 · Media Render a single outer element
Module 10 · Media React fragments
Module 11 · Media JavaScript Injection
Module 12 · Media Conditional rendering
Module 13 · Media Dynamic rendering
Module 14 · Media Components' Props
Module 15 · Media Props.children
Module 16 · Media Prop Types
Module 17 · Media Using Prop Types
Module 18 · Media React events
Module 19 · Media The bind method
Module 20 · Media Refs
Module 21 · Media Manage state in React
Module 22 · Media Decompose
Module 23 · Flowchart React siblings components
Module 24 · Media Parent component's structure
Module 25 · Media Change state functionality
Module 26 · Media Changing parent's state through Form
Module 27 · Media Depict parent's state
Module 28 · Media Create a react todo app

Close the course

Module 8 of 28 · Media

Rendering multiple elements

Kostas Diakogiannis

Rendering multiple elements

What if a component renders more than one element, a whole structure for example: We could use a parenthesis in order to specify a multi-line structure return statement. Every time we can't place the returned JSX into a single line (into the same line with the return keyword) we must wrap all the elements inside a parenthesis.

After we have done this, we can return more than one elements. Although this is correct, in this case there is another problem. Take a look to the picture above, what do you think?

Would this work?

Rendering multiple elements

16.a React.js

Instructions

Feedback

What do you think of the new look?