Search⌘ K
Home
Courses
The Road to React: The One with Hooks

React Fragments

Explore how React Fragments help you write cleaner JSX by wrapping multiple top-level elements side-by-side without adding extra HTML elements. Understand their use to improve your component structure and maintain a tidy rendered output.

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:

Node.js
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 multiple top-level elements ...