When I click on the radio button in the code, I want to filter the data of the salary Array. The rendered data should be filtered according to the text on the radio button. The check box Array filtering is working fine, but after applying the same concept, the radio type is not working properly.
Here's the code snippet:
import {Component} from 'react'
import Cookies from '[Jobby App](https://i.sstatic.net/ZLavA3Qm.png)js-cookie'
import {FcSearch} from 'react-icons/fc'
import {IoMdStar} from 'react-icons/io'
import {BsFillBagFill} from 'react-icons/bs'
import {ImLocation2} from 'react-icons/im'
- import './index.css'
const employmentTypesList = [
{
label: 'Full Time',
employmentTypeId: 'FULLTIME',
},
{
label: 'Part Time',
employmentTypeId: 'PARTTIME',
},
{
label: 'Freelance',
employmentTypeId: 'FREELANCE',
},
{
label: 'Internship',
employmentTypeId: 'INTERNSHIP',
},
]
const salaryRangesList = [
{
salaryRangeId: '1000000',
label: '10 LPA and above',
},
{
salaryRangeId: '2000000',
label: '20 LPA and above',
},
{
salaryRangeId: '3000000',
label: '30 LPA and above',
},
{
salaryRangeId: '4000000',
label: '40 LPA and above',
},
]
class JobsRoute extends Component {
state = {
profileList: [],
jobsList: [],`your text`
searchInput: '',
EmployList: [],
SalaryList: [],
}
componentDidMount() {
this.renderProfile()
this.renderJobsApi()
}
searchBox = event => {
this.setState({searchInput: event.target.value})
}
renderProfile = async () => {
//Code for fetching profile details
}
renderJobsApi = async () => {
//Code for fetching jobs API based on filters
}
EmployLists = event => {
//Function to handle checkbox selection for employment types
}
SalaryLists = event => {
//Function to handle radio button selection for salary ranges
}
buttonSearch = () => {
//Function to trigger job search
}
searchInputDown = event => {
//Function to trigger job search on pressing Enter key
}
render() {
return (
<div className="job-container">
//Rendering profile info
//Employment Type checkboxes
//Salary Range radio buttons
//Job search input and button
// Job list based on selected filters
</div>
)
}
}
export default JobsRoute
The salary details should be dynamically filtered upon clicking the radio button (salary range).