Quiero volver a cargar 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 reseñas (título + comentario).

Cuando el usuario escriba "a" en la entrada de búsqueda, la lista se volverá a cargar y le dará las listas que incluyen "a" en el título. Y los elementos que no incluyan "a" en el título, no aparecerán.

Cuando el usuario escriba "ab" en la entrada de búsqueda, la lista se volverá a cargar 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.

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

Puede agregar una lista de revisión y se guardará en el almacenamiento local. La lista se ordenará alfabéticamente y por rango superior.

==========

Reviews.js (que incluye listas de revisión)

 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(""); // sort by rank let sorted = combinedBooks.sort((a, b) => { return b.score - a.score; }); // sort by alphabetical order 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; }); // sort by rank then alphabetically let newerSorted = [...newSorted].sort((a, b) => { return b.score - a.score; }); // Reload the data based on the search input value.. BUT How? return ( <section style={{ border: "3px solid green" }}> <Header title="Book Review Lists" /> {/* search input to find the book review by title */} <form> <Input smallTitle="" placeholder="find the review by title" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> </form> <h1>{searchTerm}</h1> {newerSorted.map((review) => { const { id, title, comment, score } = review; return ( <Review key={id} title={title} comment={comment} score={score} /> ); })} </section> ); }; export default Reviews;