Applying multiple filters to an array javascript

I’m having trouble applying and using two filters to an array. I have an array of files which two attributes: a filename and a file extension. Those files are displayed in a list in a view. There are two options for filtering the list — with a simple text filter and a select dropdown based on the file extension.

Everything works fine except the text filter does not work when the default “any” select option is chosen. When the user chooses one of the file extensions, then the user can filter that list using the text filter.

https://codesandbox.io/s/shy-glade-hum3x?file=/App.js

Basically the filter should:

• Let the user switch between “all” and then any other extensions
• Regardless of which extension is chosen (including “all”), user can filter that list by using the text filter.

I have a feeling it’s purely an issue with how the .filter() is applied at the bottom of the component.

I’ve simplified the component and removed a bunch of logic to keep it simple. Many thanks in advance.

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [filenameFilterString, setfilenameFilterString] = useState("");
  const [selectedExtension, setselectedExtension] = useState("all");

  const handleKeyPress = (event) => {
    if (event.keyCode === 27 || event.target.value === "") {
      event.target.value = "";
    }
    setfilenameFilterString(event.target.value);
  };

  const anArray = [
    {
      filename: "A graet first filename",
      extension: ".ppt"
    },
    {
      filename: "A second filename",
      extension: ".doc"
    },
    {
      filename: "A third filename",
      extension: ".xls"
    },
    {
      filename: "A fourth filename",
      extension: ".xls"
    }
  ];

  const getListOfUniqueExtensions = () => {
    const extensionList = anArray.map((file) => {
      return file.extension;
    });
    return [...new Set(extensionList)];
  };

  const handleFileExtensionChange = (event) => {
    event.preventDefault();
    setselectedExtension(event.target.value);
  };

  return (
    <div className="App">
      <div className="container">
        {/* File Extensions Filter */}
        <select
          onChange={(e) => handleFileExtensionChange(e)}
          value={selectedExtension}
        >
          <option value="all">All</option>
          {getListOfUniqueExtensions().map((ext) => {
            return <option value={ext}>{ext}</option>;
          })}
        </select>

        {/* Text filter */}
        <input type="text" onKeyUp={(event) => handleKeyPress(event)}></input>

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? file.extension.includes("")
              : file.extension.includes(selectedExtension) &&
                file.filename.toLowerCase().includes(filenameFilterString)
          )
          .map((file) => {
            return <div>{file.filename}</div>;
          })}
      </div>
    </div>
  );
}

Answer

import React from "react";
import "./styles.css";
import { useState } from "react";

export default function App() {
  const [filenameFilterString, setfilenameFilterString] = useState("");
  const [selectedExtension, setselectedExtension] = useState("all");

  const handleKeyPress = (event) => {
    let input = event.target.value;
    setfilenameFilterString(input.toLowerCase());
  };

  const anArray = [
    {
      filename: "A graet first filename",
      extension: ".ppt"
    },
    {
      filename: "A second filename",
      extension: ".doc"
    },
    {
      filename: "A third filename",
      extension: ".xls"
    },
    {
      filename: "A fourth filename",
      extension: ".xls"
    }
  ];

  const getListOfUniqueExtensions = () => {
    const extensionList = anArray.map((file) => {
      return file.extension;
    });
    return [...new Set(extensionList)];
  };

  const handleFileExtensionChange = (event) => {
    event.preventDefault();
    setselectedExtension(event.target.value);
  };

  return (
    <div className="App">
      <div className="container">
        {/* File Extensions Filter */}
        <select
          onChange={(e) => handleFileExtensionChange(e)}
          value={selectedExtension}
        >
          <option value="all">All</option>
          {getListOfUniqueExtensions().map((ext) => {
            return <option value={ext}>{ext}</option>;
          })}
        </select>

        {/* Text filter */}
        <input type="text" onKeyUp={(event) => handleKeyPress(event)}></input>

        {anArray
          .filter((file) =>
            selectedExtension === "all"
              ? file.filename.toLowerCase().includes(filenameFilterString)
              : file.extension.includes(selectedExtension) &&
                file.filename.toLowerCase().includes(filenameFilterString)
          )
          .map((file) => {
            return <div>{file.filename}</div>;
          })}
      </div>
    </div>
  );
}

Live Demo: Codesandbox