Expected to return value in arrow function?

#1

Why am I getting this warning and how could I clean up this hook?

Screen Shot 2020-03-12 at 6.36.19 PM
Screen Shot 2020-03-12 at 6.36.19 PM802×166 27.2 KB

import { useState } from 'react'

export default initialFilteredTermState => {
  const [filteredTerm, setFilteredTerm] = useState(initialFilteredTermState)
  
  return {
    filteredTerm,
    // Alter filteredTerm based on Drawer click
    configureFilteredTerm: (ev) => {
      ev.preventDefault()
      // Check if filter search came from splashlist or drawer
      let updateFilteredTerm = 
          ev.currentTarget.dataset.medium
          || ev.currentTarget.children[0].innerText

      if (updateFilteredTerm === 'All') {
        setFilteredTerm('All')
      } else if (updateFilteredTerm === 'Art') {
        setFilteredTerm('Art')
      } else if (updateFilteredTerm === 'Jewelry') {
        setFilteredTerm('Jewelry')
      } else if (updateFilteredTerm === 'Photos'){
        setFilteredTerm('Photos')
      } else {
        setFilteredTerm('All')
      }
    },
    // Filter artList based on filteredTerm
    filterArtList: (artList) => {
      // Filter SplashList
      let artCounter = 0
      let jewelryCounter = 0
      let photoCounter = 0
      let artArr = []
      let jewelryArr = []
      let photoArr = []
      let splashList = []

      if (filteredTerm === 'Splash') {
        artList.map((art) => {
          const medium = art.medium
          // First Three Art
          if (!medium.includes('Jewelry') && !medium.includes('Photograph') && artCounter < 3) {
            artCounter++
            artArr.push(art)
          }
          // First Three Jewelry
          if (medium.includes('Jewelry') && jewelryCounter < 3) {
            jewelryCounter++
            jewelryArr.push(art)
          }
          // First Three Photography
          if (medium.includes('Photograph') && photoCounter < 3) {
            photoCounter++
            photoArr.push(art)
          }
          splashList = artArr.concat(jewelryArr, photoArr)
        })
        return splashList
        
      } else {
        let filteredArtArray = artList.filter((art) => {
          const medium = art.medium
          // Filter by Photos
          if (filteredTerm === 'Photos') {
            return medium.includes('Photograph')
            // Filter by Art
          } else if (filteredTerm === 'Art') {
            return !medium.includes('Photograph') 
                    && !medium.includes('Jewelry')
            // Filter by Jewelry
          } else if (filteredTerm === 'Jewelry') {
            return medium.includes('Jewelry')
            // Don't Filter
          } else if (filteredTerm === 'All') {
            return medium
          }
        })
        return filteredArtArray
      }
    }
  }
}
1 Like
#2

First of all, you should not be using the map method just to iterate through an array. Use a forEach or a for of loop instead. You only should use map if you need to create and use a new array. You are using extra memory for no reason.

5 Likes
#3

Those messages indicate that your not returning a value in your arrow functions where a returned value is expected (like in map or filter).

The advice @RandellDawson gave is relevant, so start there and see if it goes away. If not find the cases in your code that you might be missing a return value (think about adding unconditional elses to your if statements and handling them appropriately).

1 Like
#4

Thanks a lot. How could I refactor this to make it better?

#5

Still am getting the warning at:

let filteredArtArray = artList.filter((art) => {
          const medium = art.medium
          // Filter by Photos

I’ve tried to wrap it in a return() and a few other takes at this point.

#6

In this part of the code:

      } else {
        let filteredArtArray = artList.filter((art) => {
          const medium = art.medium
          // Filter by Photos
          if (filteredTerm === 'Photos') {
            return medium.includes('Photograph')
            // Filter by Art
          } else if (filteredTerm === 'Art') {
            return !medium.includes('Photograph') 
                    && !medium.includes('Jewelry')
            // Filter by Jewelry
          } else if (filteredTerm === 'Jewelry') {
            return medium.includes('Jewelry')
            // Don't Filter
          } else if (filteredTerm === 'All') {
            return medium
          }
        })

What will happen if none of the if/else if conditions are true?

#7

It’s always set to one of them.

#8

Have you verified that assumption? Maybe add a else { throw "Something's not right" } after the last else if block just in case. If it should definitely fall into one of the conditions above then adding the else with the throw won’t impact your code.

Also, if you have this up on codepen.io or something similar it would be helpful if you posted a link so we can see your most recent version.

#9

Thanks a lot for helping. I cannot check right this moment but will get back to you. Here is the latest: https://github.com/rstorms90/chizetteArt/blob/fix/CA-cleanup/src/context/filterContext.js

#10

Also, you may just want to consider making the ‘All’ condition the default if none of the other conditions are met.

So instead of:

else if (filteredTerm === 'All') {
    return medium
}

You’d just use:

else if (filteredTerm === 'All') {
    return medium
} else {
    return medium
}

Though, if it is not falling into one of the other conditions, as that is my hunch, you should probably figure out why because that could be the root of possible future issues.

3 Likes
#11

Definitely will take a look thank you very much.

#12

So, I took this advice and it didn’t remove the warning. However all of it has been working, so the other conditions are met eventually.

#13