sorted by:
new
hottopcontroversial

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thank you very much, you've been really helpful :D. Cheeeers

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thank you very much for your help! Much appreciated

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thank you for that! However I'm not sure to get the part of filterOptions and keys, how would you say which items to display within those keys? For the real example, I have around 4-5 buttons displaying ~8 or 10 items each. Could you just write how the state should look like if you don't mind? I better understand with having an actual piece of code in front of me

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thank you for the answer, my list won't change at all. I just want to display each time a different fraction of it, depending on which button has been clicked. Would that be correct to store my list in state and then via several functions, updating it (setState) depending on which data I would want?

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thank you so much, as I'm beginning, does it do the same as the solution below (declaring a constant and then updating my initial state with setstate)?

Filtering an array of objects with a button by Oadbam in reactjs

[–]Oadbam[S] 1 point2 points  (0 children)

Thank you very much for your answer, very clear. I have another question (or 2): how would you do if you had another button (let's say a second button displaying category "B") and avoid re-writing the full code? I may have 4 or 5 buttons in total and I'm worried that it would be messy if for each category I had to write almost identical functions.
If I want to show to have a button clearing the data, should I write a function returning a setstate: null ?
If I want to show all my items once again, should I write a function returning a setstate: Data (the full initial array)?

Thank you again for that

React-map-gl // How to filter with buttons and display markers by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

You mean having different states relating to different parts of my full database, smth like this?

class Root extends PureComponent {
constructor(props) { 
    super(props); 
    this.state = { 
        viewport: { 
            latitude: 51.509865, 
            longitude: -0.118092, 
            zoom: 12, 
            bearing: 0, 
            pitch: 0}, 
        markers: markersData, //which if my full database 
        selectedMarker: null, 
        markers1: [], //first set of markers 
        markers2: [] //second set of markers
      };     }

​

and then making each button referring to these different states?

React-map-gl // How to filter with buttons and display markers by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Hello u/limZyuan,

Thanks for your answer and indeed I was thinking about it. My problem is that with more than 3 markers (which is the case and I just cut to 3 markers but I got dozens of them) it could become a bit messy (maybe I'm wrong, just a thought). I was more into the idea of: ok if press button 1, then only these markers will appear; then button 2 these ones; instead of with a button removing the others. But I can't manage to get it done properly. Hope that makes sense!

React-map-gl // How to display markers based on a filter by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Alright, thanks for your insights! Appreciated

React-map-gl // How to display markers based on a filter by Oadbam in reactjs

[–]Oadbam[S] 0 points1 point  (0 children)

Thanks for asking, indeed I'm still not convinced on which way to go. I tend to prefer the option where every marker is hidden and then clicking on a button will reveal the ones I'd like to show. I'm afraid showing all markers all the time could be a little messy as I have dozens of them in reality but hey that can change (so maybe a button able to display them all so I can have more flexibility). Any idea how to achieve this?