3.10.1 jsx code writing

We have already customised our component to show a value. Now we want to push the project further and display three pieces of information at once: the date of the expense, its description and the amount. Inside our ExpenseItem component we open a parenthesis to return JSX, and quickly hit a classic React rule: a component must return a single parent element.

Wrapping everything in a single root

If you try to write two sibling <div> at the top level, the editor highlights them in red because JSX expects exactly one root. The fix is straightforward: wrap everything in one outer <div>, and nest the smaller pieces inside it - a div for the date, another with an <h2> for the description, and a third for the amount.

function ExpenseItem() {
  return (
    <div>
      <div>28 March 2022</div>
      <div>
        <h2>Car insurance</h2>
      </div>
      <div>290 euros</div>
    </div>
  );
}

Don't forget the semicolon at the end of the return statement, save the file, and watch the page render: it now shows "28 March 2022", "Car insurance" and "290 euros" stacked vertically. The component is still simple, but it already follows the structure we want for the rest of the project. In the next video we will add a stylesheet so each part looks the way we want.

Summary

This lesson teaches the fundamentals of writing clean JSX code by properly structuring nested elements. You'll learn how to wrap multiple adjacent elements in parent containers to avoid syntax errors, and how to display dynamic content like dates, titles, and prices correctly in your React components. The lesson emphasizes the importance of proper indentation and hierarchical element nesting to ensure your JSX renders without errors.

Key points

• JSX requires all adjacent elements to be wrapped in a single parent element to prevent syntax errors marked in red by your editor.
• Nested div structures allow you to display multiple pieces of content without breaking the component's rendering logic.
• Proper JSX structure organizes content hierarchically: parent div contains child divs, each displaying specific data like dates, titles, or prices.
• Missing parent wrappers cause the editor to mark code in red, signaling a syntax violation that must be fixed before the component displays correctly.
• Using correct indentation and element nesting makes JSX code more readable and maintainable, preventing common rendering issues.

FAQ

Why do multiple JSX elements need to be wrapped in a parent container?

JSX components can only return a single root element. If you try to return multiple adjacent elements without a parent wrapper, the parser throws an error marked in red. Wrapping them in a parent div solves this issue.

How do you properly display multiple pieces of content (date, title, price) in JSX?

Create a parent div and nest separate child divs inside it for each piece of content. Each div can contain specific data like a date ("28 mars"), a title ("assurance voiture"), or a price ("290 euros").

What does red highlighting in the editor indicate when writing JSX?

Red highlighting signals a syntax error in your JSX structure, typically caused by missing parent elements. Review your nesting hierarchy and ensure all adjacent elements are wrapped in a single parent container.