I am working on this React JS assignment in which I am fetching data and displaying it on my screen. Here’s my code:
const Home = () => {
const [jobs, setJobs] = useState();
const [filteredJobs, setFilteredJobs] = useState();
const jobData = async () => {
const data = await fetch(" http://localhost:3031/jobs");
const json = await data.json();
setJobs(json);
setFilteredJobs(json);
};
useEffect(() => {
jobData();
}, []);
const cityFilter = (e) => {
if (e.target.value === "All") {
setFilteredJobs(jobs);
} else {
const newJobs = jobs.filter((val) => val.location === e.target.value);
setFilteredJobs(newJobs);
}
};
const expFilter = (e) => {
if (e.target.value === "All") {
setFilteredJobs(jobs);
} else {
const newJobs = jobs.filter((val) => val.yoe === e.target.value);
setFilteredJobs(newJobs);
}
};
return (
<div>
<Header />
<div>
<select name="select city" onChange={cityFilter}>
<option value="All"> All</option>
<option value="Bengaluru">Bengaluru</option>
<option value="Pune">Pune</option>
<option value="Hyderabad">Hyderabad</option>
<option value="New Delhi">New Delhi</option>
<option value="Gurugram">Gurugram</option>
</select>
</div>
<div>
<select name="select experience" onChange={expFilter}>
<option value="All">All</option>
<option value="Internship">Internship</option>
<option value="Fresher">Fresher</option>
<option value="Early Professional">Early Professional</option>
<option value="Professional">Professional</option>
</select>
</div>
<div
style={{
display: "flex",
flexWrap: "wrap",
padding: "8px",
gap: "4px",
justifyContent: "center",
marginTop: "8px",
}}
>
{filteredJobs?.map(({ id, title, img, location, role, yoe }) => {
return (
<JobCard
key={id}
id={id}
title={title}
location={location}
role={role}
/>
);
})}
</div>
</div>
);
};
export default Home;
Currently I am stuck on applying multiple filters at the same time e.g, say a particular city is selected from filter option, a filtered city list is shown but when I go on to select another filter it filters from all my fetched API rather than selecting from city filtered data. I was trying to solve this issue by using useeffect but I am getting errors.