Gracias por tu tiempo leyendo.
Necesito ordenar países por Idioma o Continente, el usuario selecciona la opción que quiere en los botones.
países es una matriz de objetos de cada país que contiene:
Si el usuario selecciona, por ejemplo, continentes y escribe en la entrada "es", todos los resultados relacionados con el contenido de Asia se enumeran juntos en un grupo y no repiten el título del continente en cada uno, lo mismo necesito con los idiomas.
Este es mi código:
const CountrySearch = ({countries}) => { const [searchTerm, setSearchTerm] = useState(""); console.log(countries) return ( <div className="search"> <h1>Country Search</h1> <span> Some random text </span> <div className="searchResults"> <input type="text" placeholder="Search country..." onChange={event => { setSearchTerm(event.target.value) }}/> <div className="groupBy"> <h2> Group by: </h2> <div> <button> Continent </button> <button> Language </button> </div> </div> <div> {countries.filter((val) => { if (searchTerm === "") { return "" } else if (val.name.toLowerCase().includes(searchTerm.toLowerCase())){ return val } }).map((val, key) => { return ( <div key={key}> <h2> {val.continent.name} </h2> <div className="countryInfo"> <div> <span>{val.emoji}</span> <h3> {val.name} </h3> </div> <p> Capital: {val.capital} </p> <p> Currency: {val.currency} </p> </div> </div> ) }) } </div> </div> </div> ) } export default CountrySearch;Primero filtre los datos y luego agrúpelos por continente usando reduce y luego recorra las matrices y cree el JSX deseado.
Puede consultar el fragmento a continuación ( escriba "s" en el cuadro de entrada ):
const countries = [ { name: "India", continent: { name: "Asia" }, languages: [{ name: "Hindi" }, { name: "English" }, { name: "Marathi" }], }, { name: "Sri Lanka", continent: { name: "Asia" }, languages: [{ name: "Srilankan" }, { name: "Tamil" }], }, { name: "Spain", continent: { name: "Europe" }, languages: [{ name: "Spanish" }, { name: "English" }], }, { name: "Slovakia", continent: { name: "Europe" }, languages: [{ name: "English" }], }, ]; function App() { const [searchTerm, setSearchTerm] = React.useState(""); return ( <div> <input type="text" value={searchTerm} onChange={({ target }) => setSearchTerm(target.value)} /> {Object.entries( countries .filter((c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()) ) .reduce((res, c) => { if (!res[c.continent.name]) { res[c.continent.name] = []; } res[c.continent.name].push(c); return res; }, {}) ).map(([continent, countries]) => ( <ul key={continent}> <li> <div>{continent}</div> <ul> {countries.map(({ name, languages }) => ( <li key={name}> <div>{name}</div> <ul> {languages.map(({ name }) => ( <li key={name}>{name}</li> ))} </ul> </li> ))} </ul> </li> </ul> ))} </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>A continuación se muestra la parte del código del fragmento anterior que realiza la agrupación:
Object.entries( countries .filter((c) => c.name.toLowerCase().includes(searchTerm.toLowerCase())) .reduce((res, c) => { if (!res[c.continent.name]) { res[c.continent.name] = []; } res[c.continent.name].push(c); return res; }, {}) );