Filtering based on state items

Question

So i have this array as my state:

["item-one","item-two", "item-three"]

Now i have these items on my webpage:

Item One Item Two Item Three Item Four Item Five

How can i filter these items based on the state of my array. So when i filter i would get the three first items? The html of the items are like so.

 <div> <label htmlFor="item-one">Item One</label> <input type="checkbox" name="" id="item-one"/> </div> <div> <label htmlFor="item-two">Item Two</label> <input type="checkbox" name="" id="item-two"/> </div> <div> <label htmlFor="item-three">Item Three</label> <input type="checkbox" name="" id="item-three"/> </div> <div> <label htmlFor="item-four">Item Four</label> <input type="checkbox" name="" id="item-four"/> </div> <div> <label htmlFor="item-five">Item Five</label> <input type="checkbox" name="" id="item-five"/> </div>

should i use a map function or what is the best approach?

Seems you should just be map() ing your array to render the elements. — pilchard
– pilchard, Commented Jan 22, 2021 at 11:03
And before the map the array can be filtered using filter — evolutionxbox
– evolutionxbox, Commented Jan 22, 2021 at 11:05
Does this answer your question? filtering an array of objects based on another array in javascript — evolutionxbox
– evolutionxbox, Commented Jan 22, 2021 at 11:06

Beni Trainor · Accepted Answer · 2021-01-22 11:30:17Z

You would need a reference to those elements on the page. From there, in you're render function you would show/hide those elements based on you're state.

Example:

// Assume `this.state` references you're array const items = document.querySelector("div"); items.forEach(function (item) { const input_elm = item.querySelector("input"); if (this.state.includes(input_elm.id)) { item.style.display = "block"; } else { item.style.display = "none"; } });

Note: there are other ways to implement this. But I found this to be the simplest.

Collectives™ on Stack Overflow

Filtering based on state items

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related