En un proyecto de React, tengo una serie de datos que tienen nombres de empresas en sus respectivos países. También he filtrado según el nombre del país, pero no se requieren valores codificados. Entonces, ¿cuál podría ser la mejor solución óptima para hacer que el código sea dinámico?
El siguiente es el código de referencia
import { useEffect, useState } from "react"; import DetailComp from "./DetailComp"; const Home = () => { const data = [ { country: { cntryShortName: "USA" , corpName:"USA Brad"} }, { country: { cntryShortName: "USA" , corpName:"USA Bayker"} }, { country: { cntryShortName: "CAN" , corpName:"Canada Zyphus"} }, { country: { cntryShortName: "USA" , corpName:"USA Hamilton"} }, { country: { cntryShortName: "CAN" , corpName:"Canada Sterling"} }, { country: { cntryShortName: "CAN" , corpName:"Canada Stones"} }, { country: { cntryShortName: "USA" , corpName:"USA Global Exchange"} }, { country: { cntryShortName: "USA" , corpName:"USA Wrights"} }, { country: { cntryShortName: "GERMANY" , corpName:"German Moto"} }, { country: { cntryShortName: "GERMANY" , corpName:"German Wines"} }, { country: { cntryShortName: "GERMANY" , corpName:"German Plastics"} }, { country: { cntryShortName: "CAN" , corpName:"Canada Electronics"} } ]; const [newData, setNewData] = useState([]) useEffect(() => { setNewData(data) }, []) const usData = newData.filter(item => item.country.cntryShortName === "USA") const canData = newData.filter(item => item.country.cntryShortName === "CAN") return <> <DetailComp data={usData} /> <DetailComp data={canData} /> </>; }; export default Home; const DetailComp = (props) => { console.log("PROPS", props.data) return <> { props.data.map(data => ( <h2>{data.country.corpName}</h2> )) } </>; }; export default DetailComp;Como puede ver en el componente Inicio, estoy tratando de filtrar los datos de la matriz en función del nombre del país, que estoy codificando de forma difícil y no se espera. ¿Hay alguna solución mejor para hacer que el código sea dinámico?
Consulte el enlace de codesandbox --> https://codesandbox.io/s/quiet-cache-4ks1ml
Puede agrupar datos por país y luego usar esos datos agrupados para mostrar
import { useEffect, useState } from "react"; import DetailComp from "./DetailComp"; //group countries by short name const groupCountries = (data) => { return data.reduce((result, item) => { const { country: { cntryShortName } } = item; if(!result[cntryShortName]) { result[cntryShortName] = []; } result[cntryShortName].push(item); return result; }, {}) } const Home = () => { const data = [ { country: { cntryShortName: "USA", corpName: "USA Brad" } }, { country: { cntryShortName: "USA", corpName: "USA Bayker" } }, { country: { cntryShortName: "CAN", corpName: "Canada Zyphus" } }, { country: { cntryShortName: "USA", corpName: "USA Hamilton" } }, { country: { cntryShortName: "CAN", corpName: "Canada Sterling" } }, { country: { cntryShortName: "CAN", corpName: "Canada Stones" } }, { country: { cntryShortName: "USA", corpName: "USA Global Exchange" } }, { country: { cntryShortName: "USA", corpName: "USA Wrights" } }, { country: { cntryShortName: "GERMANY", corpName: "German Moto" } }, { country: { cntryShortName: "GERMANY", corpName: "German Wines" } }, { country: { cntryShortName: "GERMANY", corpName: "German Plastics" } }, { country: { cntryShortName: "CAN", corpName: "Canada Electronics" } } ]; const [newData, setNewData] = useState({}); useEffect(() => { //set new data with grouped countries setNewData(groupCountries(data)); }, []); //render grouped data return ( <> {Object.entries(newData).map(([key, value]) => <DetailComp data={value} key={key}/>)} </> ); }; export default Home;