How can search be implemented in react?

Question

React

import React, { useEffect, useState } from 'react'

function App() {
  // State
  const [peoples, setPeoples] = useState([])
  const [loading, setLoading] = useState(true)
  const [searchFilter, setSearch] = useState('')


  // Hooks
  useEffect(() => {
    loadPeoples()
  }, [])

  // Methods
  const loadPeoples = () => {
    fetch('https://swapi.dev/api/people/')
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        setPeoples(data.results)
        setLoading(false)
      })
  }
 
  
  // Renderx
  return (
    <div className="app py-5">
      <div className="container">

        <h1 className="display-1 mb-5">Star Wars Api</h1>
        <input type="text"
          className="form-control mb-4"
          placeholder="Search..."
          onChange={(e) => setSearch(e.target.value)}
        />
        {loading ? (
          <div>Loading...</div>
        ) : (
          <ul className="list-group">
            {peoples.map((man, idx) => (
              <li className="list-group-item" key={idx}>
              <div className="row">
                <div className="col-8">
                  <h3>{man.name}</h3>
                </div>
              </div>
            </li>
            ))}
          </ul>
        )}
      </div>
     
    </div>
  )
}

export {App}

Answer 1

Filter data using a user-supplied string:

const filteredPeople = people.filter(n => n.name.includes(searchFilter));

Use filter result for rendering instead of full data:

<ul className="list-group">
  {filteredPeople.map(n => (
    ...