In a React project, I have an array of data which has corporation names based in their respective countries. I have also filtered out based on the country name, but, hard coded values aren't required. So, what could be the best optimal solution, to make code dynamic
Following is the code for reference
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;
As you can see in the Home component I'm trying to filter out the array data based on country name which I'm hard coding it and not expected. Is there any better solution to make the code dynamic?
Please refer codesandbox link --> https://codesandbox.io/s/quiet-cache-4ks1ml
You can group data by country and then use that grouped data to display
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;