I’m currently trying to implement a filter component in my app to filter points shown on a map based on the selection of a dropdown box. The error occurs when I choose a selection from the dropdown menu and it occurs within my Filter Component which handles the onChange event to filter the data within my state.
Any help would be greatly appreciated!
App.js
import React from 'react';
import Map from './components/Map/Map'
import Sidebar from './components/Sidebar/Sidebar'
import { useState, useEffect } from 'react';
import "./app.css"
function App() {
const url = "/data"
const [data, setData] = useState([])
const [filteredData, setFilteredData] = useState([])
useEffect(()=>{
const fetchData = async () => {
const jobs = await fetch(url)
const jobsData = await jobs.json();
setData(jobsData)
setFilteredData(jobsData)
}
fetchData()
},[])
return (
<div className="app">
<Map data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
<Sidebar data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
</div>
);
}
export default App;
Sidebar.jsx
import React from 'react';
import Filter from '../Filter/Filter';
import "./sidebar.css"
function Sidebar(data, setData, filteredData, setFilteredData) {
return (
<div style = {{float: "right", height: "97vh", width: "30%"}} className="sidebar" >
<h1>Job Filters</h1>
<Filter data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}>
</Filter>
</div>
);
}
export default Sidebar;
Filter.jsx
import React from 'react';
import "./filter.css"
export function Filter(data, setData, filteredData, setFilteredData) {
const handleChangePriority = (e) =>{
if(e.target.value === "all"){
setFilteredData(data)
}else{
const result = [data].filter(job => job.priority === e.target.value)
setFilteredData(result)
}
}
const handleChangeStatus = (e) => {
console.log(e.target.value)
}
return (
<div className="wrapper">
<div className="priority">
<div className="box">
<h1>Priority: </h1>
<select className="priority-list" id="priority-list" onChange={handleChangePriority}>
<option value="all">All</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div className="status">
<div className="box">
<h1>Status: </h1>
<select className="status-list" id="status-list" onChange={handleChangeStatus}>
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="in-progress">In-Progress</option>
<option value="assigned">Assigned</option>
<option value="unassigned">Unassigned</option>
</select>
</div>
</div>
</div>
);
}
export default Filter;
