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