CODEWITHSUNDEEP
javascriptreactjs
popeating
popeating

Reputation: 454

Filtering and object in javascript

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?

Upvotes: 0

Views: 56

Answers (2)

AdriSolid
AdriSolid

Reputation: 2825

You use JS filter, check if your originalName exists and if it matches with your filter that comes from the fn argument

function onFilterData(filter = 'music') {
  const edges = data?.allFile?.edges;

  if (edges) {
    const target = edges.filter(edge => {
      const fileName = edge?.node?.childImageSharp?.fluid?.originalName;
      if (fileName && fileName.includes(filter)) {
        return true;
      }

      return false;
    });

    setFiltered(target);
  }
}

Upvotes: 0

bbernag
bbernag

Reputation: 313

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

Upvotes: 1

Related Questions