how to define string for .toLowerCase for filter search with multiple search items-CodePudding

I am new at React and am having trouble defining some things. My goal is to get a filter search working and filter through a JSON via API. The console shows that what I type in is acknowledged, but I keep getting undefined errors, even though I thought they were defined.

Additionally, as this is a search that can find either first or last names, how can I set the keyword to look through two separate items, i.e. data.students[0].firstName and data.students[0].lastName at once and properly send filtered results as you type?

Here's what I have:

const USERS = "https://api.hatchways.io/assessment/students";
export default function FilterSearch() {
  const [name, setName] = useState(" ");
  const [foundUsers, setFoundUsers] = useState([]);

  const filter = (keyword) => {
    setName(keyword); 
    if (!keyword || keyword !== " ") {
      setFoundUsers([]); 
    }
    axios.get(USERS).then((listStudents) => {
      console.log(listStudents);
      const results = listStudents.data.students.filter((keyword) => {
        return name.toLowerCase(keyword).startsWith(keyword.toLowerCase());
      });
      setFoundUsers(results);
    });
  };

  return (
    <div className="container">
      <form>
        <input
          type="search"
          value={name}
          onChange={(e) => {
            filter(e.target.value);
          }}
          className="input"
          placeholder="Filter"
        />
        ;
      </form>

      <div className="user-list">
        {foundUsers && foundUsers.length > 0 ? (
          foundUsers.map((name) => <StudentInfo name={name} />)
        ) : (
          <h1>No results found!</h1>
        )}
      </div>
    </div>
  );
}

CodePudding user response：

Just to make sure I understand right, you want to filter USERS and set that to foundUsers? If that's the case...

const filter = (keyword) => {

    if (!keyword || keyword !== " ") {
      setFoundUsers([]); 
    }
    axios.get(USERS).then((listStudents) => {
      console.log(listStudents);
      const results = listStudents.data.students.filter((keyword) => {
        return name.toLowerCase(keyword).startsWith(keyword.toLowerCase());
      });
      const results = listStudents.data.students.filter((singleValueFromStudentArray, index, arrayItSelf) => {
      //This is a regex way to do it, but do what you like.
      let regex = new Regex(keyword, "gi") \\ gi=global meaning whole word, caseInsensitive
      // Filter just returns a true of false value, and then results is only the true results. This will match every singleValueFromStudentArray that has every character in keyword. If keyword is S, sam, and steve will be true. If it's sa, steve will be false, and if keyword is sm, sam would also be true.
      return regex.test(singleValueFromStudentArray)
      })
      setFoundUsers(results);
    });
/// Set the new value *after* you've used the current one
    setName(keyword); 
  };

CodePudding user response：

You are going to apply a search bar for the list of users. But what if there is no search applied. Don't you need to show the list of available?

Whenever the search is typing, you are firing an API call and filtering the data from it. I would suggest you apply to