I have this array of objects in a react component and want to map only those whose owner is logged in the website
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 }
];
I have this map config that shows all of them by id, but don't know how to show only the ones that match 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>
))}
Juan Pablo Isaza
Use the filter method:
{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>
))}
This way you're creating an array where each item in the array is a mole who's owner is the same value as the currentAccount variable.
You can filter out the moles based on the currentAccount and then use that filtered array in the template.
Working Demo :
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);