reactjs - Filtering and object in javascript

Question

In my react app i'm coding a small photo gallery, with a GraphQL query i get all the images in a folder in this format:

{
  "data": {
    "allFile": {
      "edges": [
        {
          "node": {
            "childImageSharp": {
              "fluid": {
                "aspectRatio": 0.7518796992481203,
                "originalName": "music_01.jpg"
              }
            }
          }
        },
        {
          "node": {
            "childImageSharp": {
              "fluid": {
                "aspectRatio": 1.3333333333333333,
                "originalName": "music_02.jpg"
              }
            }
          }
        },
        {
          "node": {
            "childImageSharp": {
              "fluid": {
                "aspectRatio": 0.7518796992481203,
                "originalName": "food_01.jpg"
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

it return about 50 entries, that (using links on the page) i need to filter out, something like a cateogry, where the category name is based on regex /category/ (or with indexOf) (music, foood and so) in the filename. i was thinking to use a state to keep the original data separated from the filtered one, but it looks im not able to filter out the data to keep only the needed one.

my approach was something like

const Portofolio = ({data}) =>{

  const [filtered, setFiltered]=useState();

  function onFilterData(filter) {
    //scroll through data and keep only the entries that match filter
    //assign the kept data to filtered with setFiltered(keptdata)
 }

 return (
    //render the gallery from filtered object
 )
}

but im stuck on the filtered part and i cant get out of it! any suggestion?

question from:https://stackoverflow.com/questions/65926905/filtering-and-object-in-javascript

Answer 1

You can use useMemo to save the filtered list and avoid to use useEffect and setState and with this approach you save one render every time that your data changed.

You need something like this:

const filteredList = React.memo(() => {
  return data.filter(({ childImageSharp: { fluid } }) => { 
    return fluid. originalName.indexOf(filter) > -1;
  })
}, [data, filter])

data: is all your items list

filter: is the route that need to match with the item name