Estoy tratando de crear una función de barra de búsqueda de filtro que filtre a través de una cantidad determinada de objetos de una API. Sigo recibiendo este error "palabra clave no detectada en promesa keyword.toLowerCase() no es una función" error y no estoy seguro de por qué. Mi objetivo es comenzar a escribir un nombre y hacer que se filtre en la lista, pero no puedo hacer que la lista y la barra de búsqueda funcionen juntas.

He hecho console.log(listStudents) para tratar de ver qué valor debería usar, pero no estoy seguro de cómo especificar el valor correcto, buscar por nombre, ya sea el primero o el último, y qué funcionaría. También probé varios valores específicos, como data.student y data.firstName etc., pero no funciona.

Aquí está mi componente FilterSearch :

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

¿Alguien puede ayudarme a identificar dónde puedo solucionar esto para que la API y la barra de búsqueda funcionen juntas?