React Fragments

Learn how the React component returns multiple elements.

We'll cover the following...

One caveat with JSX, especially when we create a dedicated Search component, is that we must introduce a wrapping HTML element to render it:

Press + to interact
const Search = ({ search, onSearch }) => (
<div>
<label htmlFor="search">Search: </label>
<input
id="search"
type="text"
value={search}
onChange={onSearch}
/>
</div>
);

Normally the JSX returned by a React component needs only one wrapping top-level element. To render ...

Access this course and 1400+ top-rated courses and projects.