xxxxxxxxxx
function search(items) {
return items.filter((item) => {
/*
// in here we check if our region is equal to our c state
// if it's equal to then only return the items that match
// if not return All the countries
*/
if (item.region == filterParam) {
return searchParam.some((newItem) => {
return (
item[newItem]
.toString()
.toLowerCase()
.indexOf(q.toLowerCase()) > -1
);
});
} else if (filterParam == "All") {
return searchParam.some((newItem) => {
return (
item[newItem]
.toString()
.toLowerCase()
.indexOf(q.toLowerCase()) > -1
);
});
}
});
}
xxxxxxxxxx
// Add Search in react from Api
const [runData, setRunData] = useState([]);
const [search, setSearch] = useState("");
axios
.get("https://www.anapioficeandfire.com/api/books?pageSize=30")
.then((res) => setRunData(res.data))
.then((err) => console.error(err));
// filter onChange
const filterName = (e) => {
setSearch(e.target.value);
};
return (
<div className="App">
<input text="text" onChange={filterName} placeholder="Search" />
// add filter and if statement
{runData
.filter((value) => {
if (search === "") {
return value;
} else if (value.name.toLowerCase().includes(search.toLowerCase())) {
return value;
}
})
//
.map((list, index) => (
<p key={index}> {list.name}</p>
))}
</div>