I have following code.
export default function App() {
const users = [
{ id: 34, name: "A", role: "pro" },
{ id: 43, name: "B", role: "customer" },
{ id: 35, name: "C", role: "pro" },
{ id: 55, name: "D", role: "pro" },
{ id: 67, name: "test", role: "pro" },
{ id: 543, name: "Jhon", role: "customer" }
];
const customer = users.filter((u) => {
return u.role === "customer";
});
const pro = users.filter((u) => {
return u.role === "pro";
});
return (
<div className="App">
<Card role={"Customer"} count={customer.length} />
<Card role={"Pro"} count={pro.length} />
</div>
);
}
I am trying to filter users by their role and then I am showing the count of that role in Card component.
For every role I am writing filter function. That is working, but how can I improve my code for not repeating myself ?
Maybe you can try creating one function which filters users by their role and returns an array of a particular user by role, here I tried you can take look into this.
import Card from "./Card";
import "./styles.css";
export default function App() {
const users = [
{ id: 34, name: "A", role: "pro" },
{ id: 43, name: "B", role: "customer" },
{ id: 35, name: "C", role: "pro" },
{ id: 55, name: "D", role: "pro" },
{ id: 67, name: "test", role: "pro" },
{ id: 543, name: "Jhon", role: "customer" }
];
const customer = checkUserByRole('customer');
const pro = checkUserByRole('pro');
function checkUserByRole(role) {
const filteredUser = users.filter((user) => {
return user.role === role;
});
return filteredUser;
}
return (
<div className="App">
<Card role={"Customer"} count={customer.length} />
<Card role={"Pro"} count={pro.length} />
</div>
);
}}
As @UnholySheep already mentioned in the comments, something like:
function getUsersByRole(users, role) {
return users.filter((u) => u.role == role));
}
Which you can then call for each role you want.
You could alternatively even use some sort of groupBy function, like the one from another SO post: https://stackoverflow.com/a/34890276/15469537
let groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
And then simply call
let grouped = groupBy(users, 'role');
// returns {pro: Array(4), customer: Array(2)}