Search and Filtering Multiple Values React

Question

I'm new to React and having some trouble displaying the data I want. I'm building a very basic search and filter app and I'm stuck. All of the data is coming from App.js

I can search by "name" just fine. I'm having trouble filtering by "name", "dob" and "gender".

How do I do that correctly with the code I have?

App.js

import React, { useState } from 'react';
import './App.css';

// Star Wars Data 
const CHAR = [
  { id: 1, name: 'Luke Skywalker', dob: '19BBY', gender: 'Male' },
  { id: 2, name: 'C-3PO', dob: '112BY', gender: 'Droid'},
  { id: 3, name: 'R2-D2', dob: '33BBY', gender: 'Droid'},
  { id: 4, name: 'Darth Vader', dob: '41.9BBY', gender: 'Male'},
  { id: 5, name: 'Leia Organa', dob: '19BBY', gender: 'Female'},
  { id: 6, name: 'Obi-Wan Kenobi', dob: '57BBY', gender: 'Male'},
  { id: 7, name: 'Anakin Skywalker', dob: '41.9BBY', gender: 'Male'},
  { id: 8, name: 'Chewbacca', dob: '200BBY', gender: 'Wookie'},
  { id: 9, name: 'Han Solo', dob: '29BBY', gender: 'Male'}
];

function App() {
  const [name, setName] = useState('');
  const [foundCHAR, setFoundCHAR] = useState(CHAR);

  const filter = (e) => {
    const keyword = e.target.value;
    const gender_search = e.target.value;
    const dob_search = e.target.value;


    if (keyword !== '') {
      const results = CHAR.filter((user) => {
        return user.name.toLowerCase().startsWith(keyword.toLowerCase());
        return user.gender.toLowerCase().startsWith(gender_search.toLowerCase());
        return user.dob.toLowerCase().startsWith(dob_search.toLowerCase());


        // Use the toLowerCase() method to make it case-insensitive
      });
      setFoundCHAR(results);
    } else {
      setFoundCHAR(CHAR);
      // If the text field is empty, show all CHAR
    }
    setName(keyword);
    setName(gender_search);
    setName(dob_search);
  };


  return (

    <div className="container">
    <h1>React Serach & Filter Star Wars Data</h1>

      <input
        type="search"
        value={name}
        onChange={filter}
        className="input"
        placeholder="Filter"
      />

      <div className="user-list">
        {foundCHAR && foundCHAR.length > 0 ? (
          foundCHAR.map((user) => (
            <li key={user.id} className="user">

            <table class="table table-sm table-dark">
            <thead>
            <tr>
            <th scope="col"># {user.id}</th>
            <th scope="col">Name</th>
            <th scope="col">Date Of Birth</th>
            <th scope="col">Gender</th>            
            </tr>

            </thead>
            <tbody>
            <tr>
            <th scope="row" className="user-id"></th>
            <th scope="row" className="user-name">{user.name}</th>
            <th scope="row" className="user-age">{user.dob}</th>
            <th scope="row" className="user-gender">{user.gender}</th>
            </tr>
            </tbody>
            </table>

            </li>
          ))
        ) : (
          <h1>No results found!</h1>
        )}
      </div>
    </div>
  );
}

export default App;

Harsh Saini · Accepted Answer · 2021-09-25 23:40:56Z

3

From what I understand you want to check if the keyword is matching name, dob, or gender. You need to modify your filter function like this, you just need to check if the keyword is matching any of the three desired properties.

  const filter = (e) => {
    const keyword = e.target.value;

    if (keyword !== '') {
      const results = CHAR.filter((user) => {
        return user.name.toLowerCase().startsWith(keyword.toLowerCase()) ||
               user.gender.toLowerCase().startsWith(keyword.toLowerCase()) ||
               user.dob.toLowerCase().startsWith(keyword.toLowerCase());
      });
      setFoundCHAR(results);
    } else {
      setFoundCHAR(CHAR);
    }
    setName(keyword);
  };

answered Sep 25, 2021 at 23:40

Harsh Saini

6365 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spidey677 Over a year ago

Thank you! You are the React ninja! Didn't know I had to add "||".

Collectives™ on Stack Overflow

Search and Filtering Multiple Values React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related