I have 3 checkboxes set up, (Not Started, In Progress, Completed), that I would like allow only one to be checked at a certain time.

So if Not Started is automatically checked to begin with, how would I cause it uncheck 'Not Started' if I check 'Completed'?

Heres my code for now:

In App.js:

  const newGame = {
     id: uuid.v4(),
     title: title,
     hours: hours,
     notStarted: true,
     inProgress: false,
     pleted: false,

  }

  notStarted = (id) => {
    this.setState({games: this.state.games.map(game => {
      if(game.id === id){

        game.notStarted = !game.notStarted
        game.inProgress = false;
        gamepleted = false;
      }
    return game;
  })})
};

  markCompleted = (id) => {
this.setState({games: this.state.games.map(game => {
  if(game.id === id){

    gamepleted = !gamepleted
    game.notStarted = false;
    game.inProgress = false;
  }
  return game;
})})
};

And in the render() method:

<Backlog games={this.state.games} 
        markCompleted={this.markCompleted} 
        inProgress={this.inProgress}
        notStarted={this.notStarted}
/>

And this is the checkboxes in Game.js

<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.notStarted.bind(this, id)}
          />
      }
      label="Not Started"
/>
<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.markCompleted.bind(this, id)}
          />
      }
      label="Completed"
/>

As of now, I can successfully change the state of the props, but I'm unsure how to make the box check/uncheck according to the state?

I have 3 checkboxes set up, (Not Started, In Progress, Completed), that I would like allow only one to be checked at a certain time.

So if Not Started is automatically checked to begin with, how would I cause it uncheck 'Not Started' if I check 'Completed'?

Heres my code for now:

In App.js:

  const newGame = {
     id: uuid.v4(),
     title: title,
     hours: hours,
     notStarted: true,
     inProgress: false,
     pleted: false,

  }

  notStarted = (id) => {
    this.setState({games: this.state.games.map(game => {
      if(game.id === id){

        game.notStarted = !game.notStarted
        game.inProgress = false;
        game.pleted = false;
      }
    return game;
  })})
};

  markCompleted = (id) => {
this.setState({games: this.state.games.map(game => {
  if(game.id === id){

    game.pleted = !game.pleted
    game.notStarted = false;
    game.inProgress = false;
  }
  return game;
})})
};

And in the render() method:

<Backlog games={this.state.games} 
        markCompleted={this.markCompleted} 
        inProgress={this.inProgress}
        notStarted={this.notStarted}
/>

And this is the checkboxes in Game.js

<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.notStarted.bind(this, id)}
          />
      }
      label="Not Started"
/>
<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.markCompleted.bind(this, id)}
          />
      }
      label="Completed"
/>

As of now, I can successfully change the state of the props, but I'm unsure how to make the box check/uncheck according to the state?

• javascript
• reactjs
• checkbox
• material-ui
• state

3 Answers 3

Simply use the radio button instead of checkbox. This is the default radio behavior.

With using Prop [checked] of FormControlLabel from here

this.state.games.checked

If true, the ponent appears selected.

I ended up implementing this on my project using React, Material UI, and React's useState hooks.

1. I implemented an Object with the initial states set to false so we avoid getting the Material UI "changing an uncontrolled input" error
2. I set the state using a react useState hook to the object.
3. Create a function setCheckedBox that handles event when you click on checkbox. It resets all values to false and then changes the selected value to true.

Page.jsx:

import React, { useState } from "react";
import {
    Checkbox,
    FormControlLabel,
} from "@mui/material";

const checkedBoolean = {
    "Not Started": false,
    "In Progress": false,
    "Completed": false,
}

export function CheckBox(){
    const [checkedBox, setCheckedBox] = useState(checkedBoolean);

    handleCheckbox(event){
        setCheckedBox(checkedBoolean)
        setCheckedBox({[event.target.value]: event.target.checked,})
    }
 
return (
    <div>
        <FormControlLabel
            control={
                <Checkbox
                    checked={checkedBox["Not Started"]}
                    value="Not Started"
                    onChange={(event) =>
                        handleInterestCheckbox(event)
                    }
                />
            }
            label="Not Started"
        />  
        <FormControlLabel
            control={
                <Checkbox
                    checked={checkedBox["In Progress"]}
                    value="In Progress"
                    onChange={(event) =>
                        handleInterestCheckbox(event)
                    }
                />
            }
            label="In Progress"
        />  
        <FormControlLabel
            control={
                <Checkbox
                    checked={checkedBox["Completed"]}
                    value="Completed"
                    onChange={(event) =>
                        handleInterestCheckbox(event)
                    }
                />
            }
            label="Completed"
        />  
    </div>
)

}