React Fragments and Designing Reusable Components

Introduction

In React, every component must return a single root element in JSX. For example, in the Search component, we had to wrap the <label> and <input> elements inside a <div> to satisfy this rule.

Using React Fragments

To avoid adding unnecessary DOM elements, we can use React.Fragment or its shorthand <>...</>:

const Search = ({ search, onSearch }) => (
  <>
    Search: 
    
  
);

Fragments allow us to group elements without introducing extra nodes in the DOM.

Refactoring the Search Component

The Search component is tightly coupled to a specific domain. To make it reusable, we rename it to InputWithLabel and generalize its props:

const InputWithLabel = ({ id, label, value, onInputChange }) => (
  <>
    {label}
     
    
  
);

Adding Flexibility with Input Type

To support different input types like number or tel, we expose the type prop with a default value:

const InputWithLabel = ({
  id,
  label,
  value,
  type = 'text',
  onInputChange,
}) => (
  <>
    {label}
     
    
  
);

If no type is provided, it defaults to 'text'.

Conclusion

React Fragments help us return multiple elements without cluttering the DOM. By refactoring a specialized component into a generic one like InputWithLabel, we improve reusability, readability, and maintainability. These patterns are essential for building scalable and clean React applications.