Notice how I wrap return values in a div. This is because a component can only return one single element, and if you want more than one, you need to wrap it with another container tag.

This however causes an unnecessary div in the output. You can avoid this by using React.Fragment:

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </React.Fragment>
    )
  }
}

which also has a very nice shorthand syntax <></> that is supported only in recent releases (and Babel 7+):

import React, { Component, Fragment } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </>
    )
  }
}

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	▶︎ The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React