How to filter array with input value and <select> value in react

Viewed 37

How can I filter trought array and get just items that includes select

this is useState hook that I used

const [inputData, setInputData] = useState([""]);

const [optionsData, setOptionsData] = useState(["europe"]);

This is jsx code

<div>
 <input
            className="search_country_input"
            type="text"
            name="countryInput"
            placeholder="Search for a country..."
            onChange={(event) => {
              setInputData(event.target.value);
            }}
          >
</input>
<select
          className="options_select"
          name="regions"
          id="region"
          onChange={(event) => {
            setOptionsData(event.target.value);
          }}
        >
          <option value="">All regions</option>
          <option value="Europe">Europe</option>
          <option value="Asia">Asia</option>
          <option value="Africa">Africa</option>
          <option value="Americas">Americas</option>
          <option value="Oceania">Oceania</option>
 </select>
</div>

and this is logic

fetchedData
        .filter((item) => {
          if (
            inputData !== "" &&
            item.name.common
              .toString()
              .toUpperCase()
              .includes(inputData.toString().toUpperCase())
          ) {
            return item;
          } else if (inputData === "") return item;
          return false;
        })
        .filter((item) => {
          if (
            optionsData !== "" &&
            item.region
              .toString()
              .toUpperCase()
              .includes(optionsData.toString().toUpperCase())
          ) {
            return item;
          } else if (optionsData === "") return item;
          return false;
        })

when I want to display all countires i get error, others continentss and string input works picture

Error when I select all countries:

Uncaught TypeError: Cannot convert undefined or null to object

FetchedData:picture

0 Answers
Related