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; 

CodePudding user response：

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);
  };