如何在react中实现两个搜索词？第一个搜索项是api中的名称，第二个搜索项是元素的孙子的innerhtml（孙子是元素数组）。用户应该能够通过两个搜索词一起或单独过滤搜索。

import React, { useState } from "react";
import Student from "./Student";
import Input from "./Input";

import "../stylesheets/StudentsContainer.scss";

const StudentsContainer = ({ students }) => {
  const [searchByName, setSearchByName] = useState("");
  const [searchByTag, setSearchByTag] = useState("");
  const [tags, setTags] = useState([]);

  const addTagClick = (newTag) => {
    setTags((prevTags) => [...prevTags, newTag]);
  };

  const renderStudentsByNameSearch = () => {
    return students
      .filter((student) => {
        if (searchByName.length < 2) {
          return student;
        } else {
          const fullName = student.firstName.concat(student.lastName);
          return fullName
            .toLowerCase()
            .includes(searchByName.toLocaleLowerCase());
        }
      })
      .map((student) => {
        return (
          <Student
            tags={tags}
            addTagClick={addTagClick}
            key={student.id}
            student={student}
          />
        );
      });
  };

  return (
    <section className="students-container">
      <Input
        value={searchByName}
        placeholder="Search by name"
        onChange={({ target }) => setSearchByName(target.value)}
      />
      <Input
        placeholder="Search by tag"
        onChange={({ target }) => setSearchByTag(target.value)}
      />
      {renderStudentsByNameSearch()}
    </section>
  );
};

export default StudentsContainer;

谢谢你的帮助！