Array.prototype.filter() expects a value to be returned at the end of arrow function, React

Question

I am making a search component in react and cant figure out this Error? i think its probably jus syntax but I cant see it.

src/components/SearchResults.js Line 38:22: Array.prototype.filter() expects a value to be returned at the end of arrow function array-callback-return

 const filterData = () => {
    return data
      .filter((item) => {
        if (searchTerm === "") {
        } else {
          let searchText = item.title;
          let searchBlock = item.content;
          if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
            return item;
          } else {
            let test = null;
            searchBlock.forEach((obj) => {
              if (obj.text && 
                obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
                test = true;
                return test;
              }
            });
            if (test) {
              return item;
            }
          }
        }
      })
      .map((item) => {
        return (
          <div key={item.index}>
            <h3 style={{ padding: "0.25rem" }}>{splitResult(item.title)}</h3>
            {item.content.map((block, i) => (
              <div key={i}>
                {block.text && <div>{splitResult(block.text)}</div>}
                {block.items && (
                  <div>
                    {block.items.map((l, i) => (
                      <div style={{ padding: "0.25rem" }} key={i}>
                        {splitResult(l)}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <div
              className={styles.searchLink}
              onClick={() => {
                context.setCurrentSlide(item.index);
                setSearchTerm("");
                hideResults();
                clearInput();
                toggleSearch();
              }}
            >
              Go To This Slide
            </div>
            <hr />
          </div>
        );
      });
  };

Answer 1

You are using filter method wrong. It accepts a function as a parameter and that function should always return boolean.

More info

Your code is returning object (truthy) in some cases and in other cases it's returning undefined.

Here is your code with some comments to show you what's going on:

.filter((item) => {
    if (searchTerm === "") {
      // returning undefined
    } else {
      let searchText = item.title;
      let searchBlock = item.content;
      if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
        return item; // would be better to do: return true;
      } else {
        let test = null;
        searchBlock.forEach((obj) => {
          if (obj.text && 
            obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
            test = true; 
            return test; // unnecessary 
          } 
        });
        if (test) {
          return item; // would be better to return true;
        }
        // returning undefined;
      }
    }
  })

Here is another way of doing it (not tested):

 .filter((item) => {
    if (searchTerm === "") return false; // searchTerm is in scope?

    let searchText = item.title;
    let searchBlock = item.content;
    if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
      return true;
    } 

    let test = false;
    searchBlock.forEach((obj) => {
      if (obj.text && 
        obj.text.toLowerCase().includes(searchTerm.toLowerCase())) {
        test = true;
      }
    });

    return test;
})