Filter data based on 2 values - reactjs

Question

I am creating an application with a requirement for 2 search bars. One to search by name and another to search by tag. The search should also work when the user puts both name and tag in the searchbars.
The data from the api is in the format
{
"students" : [
{
"city": "city",
"company" : "company",
"email" : "email",
"firstName" : "firstName",
"grades" : ["12", "54"],
"id" : "1",
"lastName" : "lastName",
"pic" : "url",
"skill" : "skill"
},
],
}
My application is running on https://temp-application.netlify.app/
Currently the application does search with name as it is supposed to be.
But as soon as I attach search by tag functionality with it. Everything breaks down.
This is how I implemented searching by both name and tag.
useEffect(() => {
let filteredResults = results.filter((result) => {
const name = result.firstName + " " + result.lastName;
const isName = name
.toLowerCase()
.includes(searchName.toLowerCase());
const tags =
result.tag !== undefined ? result.tag.toString() : false;
const isTag =
typeof tags === "string"
? tags.toLowerCase().includes(searchTag.toLowerCase())
: false;
return isName && isTag;
});
setStudents(filteredResults);
}, [searchName, searchTag]);
Notice that 'tag' array is not present in the object returned by the API

Answer 1

The link you gave is not working.
For Tags, you are searching in the "tag" string in the Student(result) object but there is no key named tag in the given data.
Even if you have the tag key, you are probably not getting the result because you are doing a "&&" instead of "||"

Answer 2

I solved it. The problem was that I was trying to do the search in one-go. But instead I needed to make a if-else chain to achieve the result.
Here is the final function
let filteredResults = results.filter((result) => {
const name = result.firstName + " " + result.lastName;
const tags =
result.tag !== undefined ? result.tag.toString() : false;
if (searchName !== "" && searchTag === "") {
return name.toLowerCase().includes(searchName.toLowerCase());
} else if (searchName === "" && searchTag !== "") {
return typeof tags === "string"
? tags.toLowerCase().includes(searchTag.toLowerCase())
: false;
} else if (searchName !== "" && searchTag !== "") {
const isName = name
.toLowerCase()
.includes(searchName.toLowerCase());
const isTag =
typeof tags === "string"
? tags.toLowerCase().includes(searchTag.toLowerCase())
: false;
return isName && isTag;
} else if (searchName === "" && searchTag === "") {
return true;
}
return false;
});
setStudents(filteredResults);
}, [searchName, searchTag]);