Tengo el siguiente código .
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> ); } Estoy tratando de filtrar a los usuarios por su función y luego muestro el recuento de esa función en el componente Card .
Para cada rol, estoy escribiendo la función de filtro. Eso está funcionando, pero ¿cómo puedo mejorar mi código para no repetirme?
Tal vez pueda intentar crear una función que filtre a los usuarios por su rol y devuelva una matriz de un usuario en particular por rol, aquí intenté que pueda ver esto.
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> ); }}
Como @UnholySheep ya mencionó en los comentarios, algo como:
function getUsersByRole(users, role) { return users.filter((u) => u.role == role)); }Que luego puede llamar para cada rol que desee.
Alternativamente, incluso podría usar algún tipo de función groupBy , como la de otra publicación SO: 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; }, {}); };Y luego simplemente llame
let grouped = groupBy(users, 'role'); // returns {pro: Array(4), customer: Array(2)}