Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

143
Views
add/remove elements of checkbox from the array of state object in React

When user click on the checkbox item it should be added to array. When unchecked it should be removed from array list. conditions: Maintain the array in the state object which contains the employmentType of the checked checkbox input elements 1.Whenever the employment type input checkbox is checked, that respective employment type id should be present in the array 2.And whenever the employment type input checkbox is unchecked, that respective employment type id should be removed from the array 3.Form the string using join() and use that string as a query parameter in jobsApiUrl code:

const employmentTypesList = [
  {label: 'Full Time',
    employmentTypeId: 'FULLTIME',
  },
  {
    label: 'Part Time',
    employmentTypeId: 'PARTTIME',
  },
  {
    label: 'Freelance',
    employmentTypeId: 'FREELANCE',
  },
  {
    label: 'Internship',
    employmentTypeId: 'INTERNSHIP',
  },
]

class Jobs extends Component {
  state = {
    apiStatus: apiConstantStatus.initial,
    jobsList: [],
    searchInput: '',
    activeEmploymentId: '',
    activeSalaryId: '',
    employmentTypeListId: [], 
  }
  
  componentDidMount() {
    this.getJobs()
  }

  getJobs = async () => {
    this.setState({apiStatus: apiConstantStatus.inProgress})
    const jwtToken = Cookies.get('jwt_token')
    const {employmentTypeListId, activeSalaryId, searchInput} = this.state

    // Need update Here
    const employmentType = employmentTypeListId.join(',')

    const apiUrl = `https://apis.ccbp.in/jobs? 
    employment_type=${employmentType}&minimum_package=${activeSalaryId}&search=${searchInput}`
    const options = {
      headers: {
        Authorization: `Bearer ${jwtToken}`,
      },
      method: 'GET',
    }
}
}
export default Jobs

//render method

onChangeEmployTypesIds = event => {

    const {employmentTypeListId} = this.state
    const isChecked = event.target.checked
    console.log(isChecked)
    // add values to array
    if (isChecked) {
      this.setState({
        employmentTypeListId: [...employmentTypeListId, event.target.value],
      })
    } else {

      // remove item from array

      const filtered = employmentTypeListId.filter(
        eachItem => eachItem !== event.target.value,
      )
      this.setState({employmentTypeListId: filtered})
    }
}
renderEmploymentTypesList = () => {

const {activeEmploymentId} = this.state

    return employmentTypesList.map(empType => (
      <li key={empType.employmentTypeId} >
        <input
          type="checkbox"
          className="checkbox-input"
          id="emp"
          value={activeEmploymentId}
          onChange={this.onChangeEmployTypesIds}
        />
        <label htmlFor="emp" className="label-name" value="label">
          {empType.label}
        </label>
      </li>
    ))
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!