Just wanted to know, How to output if the element of the object is in another array in React.
example:
my object:
>response
>fruits
>banana
>0
>test: 1
>apple
>0
>test: 2
my array:
[banana, apple]
I just wanted to output it like this.
response.fruits[select from my array if match?]
Is this possible? thanks
If I understand your post correctly you want to have some sort of filter mechanism that filters your fruits by their kind.
To do that you need to filter() out the elements that your filter includes(). Once you have done that it's just a matter of how you wanna display the result using map(). For simplicity I have chosen a nested list here which list all the fruit kinds that match that filter and the values you have assinged them. Obviously the test property does not make much sense, so I've gone ahead and added some more meaningful data, but the principle remains the same.
const response = {
fruits: {
banana: [
{ inStock: 1, sold: 2 }
],
apple: [
{ inStock: 3, sold: 4 }
],
}
}
function App() {
const [fruitFilter, setFruitFilter] = React.useState(["banana", "apple"]);
return (
<React.Fragment>
<button onClick={e => setFruitFilter(["banana"])}>
Only show banana
</button>
<ul>
{
// get the keys and values of the fruits object
Object.entries(response.fruits)
// only get the arrays where the fruit filter matches
.filter(([fruitType, fruitArrays]) => fruitFilter.includes(fruitType))
// now output the result
.map(([fruitType, fruitArrays]) => (
<React.Fragment>
<li>{fruitType}</li>
<ul>
{fruitArrays.map(it => (
<React.Fragment>
<li>In stock: {it.inStock}</li>
<li>Sold: {it.sold}</li>
</React.Fragment>
))}
</ul>
</React.Fragment>
))
}
</ul>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="root"></div>Please note:
The above component is working but it should really be split up in multiple components as it's kind of messy and complicated. You could for example move the sublists to their own component which will make this component alot more readable already.
In case you have many filter criteria (a couple hundreds or thousands) it makes sense to use a Set instead of an Array for better performance, but that is certainly not required for the average UI filter