Tengo esta matriz de objetos en un componente de reacción y quiero mapear solo aquellos cuyo propietario haya iniciado sesión en el sitio web.
const moles = [ {name: 'Welthy Moles #001', image: Welthy1, Owner: 'Luis', id: 1 }, {name: 'Welthy Moles #002', image: Welthy2, Owner: 'Pepe', id: 2 }, {name: 'Welthy Moles #003', image: Welthy3, Owner: 'July', id: 3 }, {name: 'Welthy Moles #004', image: Welthy4, Owner: 'Pepe', id: 4 }, {name: 'Welthy Moles #005', image: Welthy5, Owner: 'Lola', id: 5 }, {name: 'Welthy Moles #006', image: Welthy6, Owner: 'Luis', id: 6 }, {name: 'Welthy Moles #007', image: Welthy7, Owner: 'Raul', id: 7 }, {name: 'Welthy Moles #008', image: Welthy8, Owner: 'Brens', id: 8 }, {name: 'Welthy Moles #009', image: Welthy9, Owner: 'Jack', id: 9 }, {name: 'Welthy Moles #010', image: Welthy10, Owner: 'Sandra', id: 10 }, {name: 'Welthy Moles #011', image: Welthy11, Owner: 'Pepe', id: 11 }, {name: 'Welthy Moles #012', image: Welthy12, Owner: 'Luis', id: 12 }, {name: 'Welthy Moles #013', image: Welthy13, Owner: 'Jose', id: 13 }, {name: 'Welthy Moles #014', image: Welthy14, Owner: 'Sofy', id: 14 }, {name: 'Welthy Moles #015', image: Welthy15, Owner: 'July', id: 15 }, {name: 'Welthy Moles #016', image: Welthy16, Owner: 'Brens', id: 16 }, {name: 'Welthy Moles #017', image: Welthy17, Owner: 'Brens', id: 17 }, {name: 'Welthy Moles #018', image: Welthy18, Owner: 'Sofy', id: 18 }, {name: 'Welthy Moles #019', image: Welthy19, Owner: 'Laura', id: 19 }, {name: 'Welthy Moles #020', image: Welthy20, Owner: 'Charls', id: 20 } ];Tengo esta configuración de mapa que los muestra a todos por ID, pero no sé cómo mostrar solo los que coinciden con mole.Owner = currentAccount
{moles.map((mole) => ( <div className='mole-preview' key={mole.id}> <h1> #{mole.id} </h1> <img src={mole.image} alt="mole" /> <h2> {mole.name} </h2> </div> ))}Utilice el método de filtro:
{moles.filter(mole => mole.Owner === currentAccount).map((mole) => ( <div className='mole-preview' key={mole.id}> <h1> #{mole.id} </h1> <img src={mole.image} alt="mole" /> <h2> {mole.name} </h2> </div> ))} De esta manera, está creando una matriz en la que cada elemento de la matriz es un topo cuyo propietario tiene el mismo valor que la variable currentAccount .
Puede filtrar los lunares según la currentAccount y luego usar esa matriz filtrada en la plantilla.
Demostración de trabajo:
const moles = [ {name: 'Welthy Moles #001', image: 'Welthy1', Owner: 'Luis', id: 1 }, {name: 'Welthy Moles #002', image: 'Welthy2', Owner: 'Pepe', id: 2 }, {name: 'Welthy Moles #003', image: 'Welthy3', Owner: 'July', id: 3 }, {name: 'Welthy Moles #004', image: 'Welthy4', Owner: 'Pepe', id: 4 }, {name: 'Welthy Moles #005', image: 'Welthy5', Owner: 'Lola', id: 5 }, {name: 'Welthy Moles #006', image: 'Welthy6', Owner: 'Luis', id: 6 }, {name: 'Welthy Moles #007', image: 'Welthy7', Owner: 'Raul', id: 7 }, {name: 'Welthy Moles #008', image: 'Welthy8', Owner: 'Brens', id: 8 }, {name: 'Welthy Moles #009', image: 'Welthy9', Owner: 'Jack', id: 9 }, {name: 'Welthy Moles #010', image: 'Welthy10', Owner: 'Sandra', id: 10 }, {name: 'Welthy Moles #011', image: 'Welthy11', Owner: 'Pepe', id: 11 }, {name: 'Welthy Moles #012', image: 'Welthy12', Owner: 'Luis', id: 12 }, {name: 'Welthy Moles #013', image: 'Welthy13', Owner: 'Jose', id: 13 }, {name: 'Welthy Moles #014', image: 'Welthy14', Owner: 'Sofy', id: 14 }, {name: 'Welthy Moles #015', image: 'Welthy15', Owner: 'July', id: 15 }, {name: 'Welthy Moles #016', image: 'Welthy16', Owner: 'Brens', id: 16 }, {name: 'Welthy Moles #017', image: 'Welthy17', Owner: 'Brens', id: 17 }, {name: 'Welthy Moles #018', image: 'Welthy18', Owner: 'Sofy', id: 18 }, {name: 'Welthy Moles #019', image: 'Welthy19', Owner: 'Laura', id: 19 }, {name: 'Welthy Moles #020', image: 'Welthy20', Owner: 'Charls', id: 20 } ]; const currentAccount = 'Pepe'; const res = moles.filter((obj) => obj.Owner === currentAccount); console.log(res);