How to add basic search feature to react table

Question

So I have a table I made in a react app, it's currently just rows and columns. I want to add a basic search feature, where a user can type a name and get rows matching that name. I've looked at some examples online, but nothing covers how to add a search feature with the type of table I made. Any tips or knowledge of how to do this given the code I have.

import React from "react";
import './App.css';
class App extends React.Component {
   
    // Constructor 
    constructor(props) {
        super(props);
   
        this.state = {
            items: [],
            DataisLoaded: false
        };
    }
   
    // ComponentDidMount is used to
    // execute the code 
    componentDidMount() {
        fetch(
"http://ec2-34-213-215-13.us-west-2.compute.amazonaws.com:3001/getPatients")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
    }
    render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Please wait some time.... </h1> </div> ;
   
        return (
        <div className = "App">
            <h1> Welcome to the Master Patient Index </h1>  {
                 <table class="center">
                 <tr>
                   <th>First Name</th>
                   <th>Last Name</th>
                   <th>DOB</th>
                   <th>Gender</th>
                   <th>SSN</th>
                   <th>Race</th>
                   <th>Ethnicity</th>
                   <th>Marital</th>
                   <th>Drivers License</th>
                   <th>Passport</th>
                   <th>Address</th>
                   <th>City</th>
                   <th>State</th>
                   <th>County</th>
                   <th>Zip</th>
                 </tr>
                 {items.map((items, key) => {
                   return (
                     <tr key={key}>
                       <td>{items.FIRST}</td>
                       <td>{items.LAST}</td>
                       <td>{items.BIRTHDATE}</td>
                       <td>{items.GENDER}</td>
                       <td>{items.SSN}</td>
                       <td>{items.RACE}</td>
                       <td>{items.ETHNICITY}</td>
                       <td>{items.MARITAL}</td>
                       <td>{items.DRIVERS}</td>
                       <td>{items.PASSPORT}</td>
                       <td>{items.ADDRESS}</td>
                       <td>{items.CITY}</td>
                       <td>{items.STATE}</td>
                       <td>{items.COUNTY}</td>
                       <td>{items.ZIP}</td>
                     </tr>
                   )
                 })}
               </table>
            }
        </div>
    );
}
}
   
export default App;

Answer 1

I would do this by adding a new property to your state called searchTerm.

constructor(props) {
    super(props);

    this.state = {
        items: [],
        searchTerm: ''
    };

    this.handleChange = this.handleChange.bind(this);
}


handleChange(event) {
  this.setState({
    [event.target.name]: event.target.value 
  })
}

Then add an input field to update the searchTerm

<input placeholder="search here..." value={searchTerm} name="searchTerm" onChange={this.handleChange}  />

Then using the .filter array method to filter by search term

             {items
             .filter(items => items.FIRST.toLowerCase().includes(searchTerm.toLowerCase())) 
             .map((items, key) => {
               return (
                 <tr key={key}>
                   <td>{items.FIRST}</td>
                 </tr>
               )
             })}

Full code: (simplied version of your code)

https://codesandbox.io/s/cool-bird-i2nj5o?file=/src/App.js:844-1183