Recargar una matriz de objetos según el valor de entrada de búsqueda utilizando React Hooks.

Quiero recargar una matriz de objetos y hacer que aparezca en función del valor de entrada de búsqueda.

Por ejemplo, hay una entrada de búsqueda y una lista de revisiones (título + comentario).

Cuando el usuario escribe “a” en la entrada de búsqueda, la lista se recargará y le dará las listas que incluyen “a” en el título. Y los elementos que no incluyen “a” en el título no aparecerán.

Cuando el usuario escribe “ab” en la entrada de búsqueda, la lista se recargará y le dará las listas que incluyen “ab” en el título. Y los elementos que no incluyen “ab” en el título no aparecerán.

Puede echar un vistazo a mi mini proyecto actual aquí: https://distracted-golick-f00481.netlify.app/

Puede agregar una lista de revisiones y se guardará en almacenamiento local. La lista se ordenará por orden alfabético y rango más alto.

==========

Reviews.js (que incluye listas de revisiones)

import React, { useState } from “react”;
import Header from “./Header”;
import Review from “./Review”;
import Input from “./Input”;

const Reviews = ({ books, initialData }) => {
const combinedBooks = initialData.concat(books);
const [myBooks, setMyBooks] = useState(combinedBooks);

const [searchTerm, setSearchTerm] = useState(“”);

// ordenar por rango
let sorted = combinedBooks.sort((a, b) => {
return b.score – a.score;
});

// ordenar por orden alfabético
let newSorted = sorted.sort(function (a, b) {
let fa = a.title.toLowerCase(),
fb = b.title.toLowerCase();

if (fa < fb) {
  return -1;
}
if (fa > fb) {
  return 1;
}
return 0;

});

// ordenar por rango y luego alfabéticamente
let newerSorted = […newSorted].sort((a, b) => {
return b.score – a.score;
});

// Recargar los datos en función del valor de entrada de búsqueda … ¿CÓMO?

return (

);
};

export default Reviews;