How to Create a Search Bar in React: Simple Guide

To create a search bar in React, use a functional component with a useState hook to track the input value. Update the state on input change and filter your data based on the search term to display matching results.

Syntax

A basic search bar in React uses a functional component with useState to hold the search text. The input element has an onChange event handler that updates this state. You then use this state to filter or search your data.

• useState: stores the current search text.
• input: the text box where users type.
• onChange: updates the state when typing.
• Filtering logic: uses the state to show matching results.

jsx

import React, { useState } from 'react';

function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <input
      type="text"
      placeholder="Search..."
      value={searchTerm}
      onChange={handleChange}
    />
  );
}

export default SearchBar;

Example

This example shows a search bar that filters a list of fruits as you type. It updates the displayed list in real time based on the search input.

jsx

import React, { useState } from 'react';

function SearchBarExample() {
  const [searchTerm, setSearchTerm] = useState('');
  const fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Grapes', 'Pineapple'];

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const filteredFruits = fruits.filter(fruit =>
    fruit.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={handleChange}
        aria-label="Search fruits"
      />
      <ul>
        {filteredFruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchBarExample;

Output

A text input labeled 'Search fruits...' and below it a list that updates to show only fruits matching the typed text.

Common Pitfalls

Common mistakes when creating a search bar in React include:

• Not updating the state on input change, so the search term never changes.
• Filtering data without normalizing case, causing missed matches.
• Not adding a key prop when rendering lists, which can cause rendering issues.
• Using uncontrolled inputs without linking value and onChange, leading to inconsistent UI.

jsx

/* Wrong: No state update on input change */
function WrongSearch() {
  let searchTerm = '';
  return <input type="text" placeholder="Search..." />;
}

/* Right: Use state and onChange to update */
import React, { useState } from 'react';
function RightSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={e => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}

export default RightSearch;

Quick Reference

Tips for building a React search bar:

• Use useState to track input value.
• Update state on onChange event.
• Filter your data using Array.filter() and String.includes().
• Normalize case with toLowerCase() for better matching.
• Always add key props when rendering lists.
• Use semantic HTML and add aria-label for accessibility.

Key Takeaways

Use React's useState hook to store and update the search input value.

Filter your data array based on the search term using case-insensitive matching.

Always update the input value with onChange to keep the UI and state in sync.

Add unique keys when rendering filtered lists to avoid React warnings.

Include accessibility features like aria-label on the input element.