Ways to program a checkbox to perform various functions depending on whether it is checked or unchecked

Question

Ways to program a checkbox to perform various functions depending on whether it is checked or unchecked

Hey there, I'm facing an issue with a checkbox. When it's checked, it should save a value, and when it's unchecked, it should delete that value. I tried the "easy way" in the "Controlled" section of Material UI's Checkbox documentation, but it didn't work for me. So, I looked for alternative solutions and stumbled upon a similar problem on Stack Overflow about calling 2 functions on click of a regular checkbox.

 Relevant code

const [studentID, setStudentID] = useState([])
const setStudent = (student) => {
  var checkBox = document.getElementById('checkBox');
     if(checkBox.ariaChecked == true){
         console.log("Save data")
         let data = studentID;
         data.push(student);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

                <Checkbox  
                color = "primary"
                id = "checkBox"
                onChange = {() => setStudent(student.uid)}
                inputProps={{ 'aria-label': 'controlled' }}
                />

I attempted to adapt suggestions from other posts, but they only go through one option. I haven't implemented the code to delete the value yet; I just added a console log for now.

if I invert them this is how it looks when I try to save data (this does works but since it only does one or the other it repeats)

Any tips, suggestions, documentation, or help would be greatly appreciated. Feel free to reach out if you need more information.

reactjs checkbox material-ui

Answer 1

Answer №1

To begin with, controlling the state of a component is essential. This involves managing when it is checked and when it is not. To achieve this, you should include an attribute called "checked" in your component as part of its state:

    const [ checked, setChecked ] = useState(false)

    <Checkbox  
      checked={checked}
      ...
    />

Once this step is complete, there are two approaches you can take. The first option involves implementing the functionality as follows:

const [studentID, setStudentID] = useState([])
const [ checked, setChecked ] = useState(false)

const setStudent = (estudiante, check) => {
  console.log(estudiante, check)
  setChecked(prevState => !prevState);
     if(check){
         console.log("Save data")
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

    <Checkbox  
      checked={checked}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid, checked)}
      inputProps={{ 'aria-label': 'controlled' }}
    />

The second option utilizes the useEffect hook:

    const [studentID, setStudentID] = useState([])
    const [ checked, setChecked ] = useState(false)
    const [ id, setId ] = useState(null)
    
    useEffect(() => {
       const setStudent = () => {
        if(checked){
          //your code
        }else{
          //your code
        }
       }
       if(!isFirstTime){
          setStudent()
       }
    },[checked, id])

        <Checkbox  
          checked={checked}
          color = "primary"
          id = "checkBox"
          onChange = {() => {setId(estudiante.uid),setChecked(prevState => !prevState)}}
          inputProps={{ 'aria-label': 'controlled' }}
        />

UPDATE:

If the checkbox is within a map, you can use the data state to reflect the checked checkboxes like so:

const [studentID, setStudentID] = useState([])

// Example code for demonstration purposes
const setStudent = (estudiante) => {
  if (setStudentID.find(studentId => studentId === estudiante.uid)) {
    setStudentID([ ...data, estudiante])
    ... //your code
  }else{
    setStudentID(data.filter(studentId => studentId !== estudiante))
    ... //your code
  }
}

    <Checkbox  
      checked={setStudentID.find(studentId => studentId === estudiante.uid)}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid)}
      inputProps={{ 'aria-label': 'controlled' }}
    />

Answer 2

To begin with, controlling the state of a component is essential. This involves managing when it is checked and when it is not. To achieve this, you should include an attribute called "checked" in your component as part of its state:

    const [ checked, setChecked ] = useState(false)

    <Checkbox  
      checked={checked}
      ...
    />

Once this step is complete, there are two approaches you can take. The first option involves implementing the functionality as follows:

const [studentID, setStudentID] = useState([])
const [ checked, setChecked ] = useState(false)

const setStudent = (estudiante, check) => {
  console.log(estudiante, check)
  setChecked(prevState => !prevState);
     if(check){
         console.log("Save data")
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log(studentID)
      } 
       else{
         console.log("Delete data")
        }  
}

    <Checkbox  
      checked={checked}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid, checked)}
      inputProps={{ 'aria-label': 'controlled' }}
    />

The second option utilizes the useEffect hook:

    const [studentID, setStudentID] = useState([])
    const [ checked, setChecked ] = useState(false)
    const [ id, setId ] = useState(null)
    
    useEffect(() => {
       const setStudent = () => {
        if(checked){
          //your code
        }else{
          //your code
        }
       }
       if(!isFirstTime){
          setStudent()
       }
    },[checked, id])

        <Checkbox  
          checked={checked}
          color = "primary"
          id = "checkBox"
          onChange = {() => {setId(estudiante.uid),setChecked(prevState => !prevState)}}
          inputProps={{ 'aria-label': 'controlled' }}
        />

UPDATE:

If the checkbox is within a map, you can use the data state to reflect the checked checkboxes like so:

const [studentID, setStudentID] = useState([])

// Example code for demonstration purposes
const setStudent = (estudiante) => {
  if (setStudentID.find(studentId => studentId === estudiante.uid)) {
    setStudentID([ ...data, estudiante])
    ... //your code
  }else{
    setStudentID(data.filter(studentId => studentId !== estudiante))
    ... //your code
  }
}

    <Checkbox  
      checked={setStudentID.find(studentId => studentId === estudiante.uid)}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid)}
      inputProps={{ 'aria-label': 'controlled' }}
    />

Ways to program a checkbox to perform various functions depending on whether it is checked or unchecked

Answer №1

Similar questions

Utilizing pseudo-selectors in customizing styleOverrides within MUI version 5 Theming

React Router integration problem with Semantic UI React

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

State loss occurs when moving to a different page using next/link

Material-UI Grid in Full Width Mode is malfunctioning

Background Design using React-Native SVG

Is it possible to create a development build using Npm with React and Typescript?

Could I possibly incorporate @mui/material into an Angular project?

Encountering a "Module build failed: Error: ENOENT: no such file or directory" issue when attempting to import Material UI

Steps for updating react-router-dom to version 6

Where should I store dynamically uploaded images in create-react-app?

A guide on utilizing the useState hook to tally occurrences of elements within an array - specifically within React's useState hook

What is the best way to create a responsive Material UI Modal?

Synchronizing data between React Parent and Child Components is seamless even when the data is not related

What is the best practice for storing references to DOM elements in Reactjs?

Modifying React state within nested setTimeout callbacks

Creating a User Interface Table with Selectable Cells in Material Design

The functionality of CSS transitions may be affected when dynamically adding a class

The occurrence of TypeError in next.js Dropzone stating that (0 , _mantine_core__WEBPACK_IMPORTED_MODULE_0__.rem) is not a function is indicating

What could be causing my carousel layout to display vertically instead of horizontally when using flex?