How can I check only one check box at a time instead of all in a list of checkboxes in React

Question

I have a list of chat room channels for people to talk i.e there is a lifestyle channel, shopping channel, pets channel etc.

I am now trying to categorise each channel to make it easier for the user to find what they want. In order to do so, on creation of a chatroom channel I need the user to select which category the channel they are creating best fits into. A bit like YouTube does when you upload a video.

So far I have created a separate component which is a list of checkboxes with the different categories the user can put their channel into:

import React from 'react';

const options = [
  { label: "Lifestyle", value: "lifestyle"},
  { label: "Area", value: "area" },
  { label: "Random", value: "random" },
  { label: "Comedy", value: "comedy" },
  { label: "Entertainment", value: "entertainment" }
];
const ChannelCategory = (props) => {
return  (
  <div>
    {props.title}
    <ul>
    {options.map((option) => (
     <li key={props.key}>
       <label>
       {option.label}
       <input
         className={props.className}
         name="test"
         checked={props.checked}
         onChange={() => props.onChange(option.value)}
         type="checkbox"
       />
       </label>
     </li>
    ))}
  </ul>
  </div>
)
};
export default ChannelCategory;

I am using the above component on the page below, I would like that when the user selects just ONE of the options only ONE input box is checked, however at the moment when I click ONE input box for instance lifestyle they ALLLL get checked and for every single channel too:( Any ideas why?

 const [checked, setCheckBoxChecked] = useState(false);
[...]
  const onAddCategory = (value) => {
    console.log(value);
    if (value === "lifestyle") {
      setCheckBoxChecked(checked => !checked); 
    }
    if (value === "area") {
      setCheckBoxChecked(checked => !checked); 
    }
    if (value === "random") {
      setCheckBoxChecked(checked => !checked); 
    }
    if (value === "comedy") {
      setCheckBoxChecked(checked => !checked); 
    }
  };

[...]
  const options = [
    { label: "Lifestyle", value: "lifestyle"},
    { label: "Area", value: "area" },
    { label: "Random", value: "random" },
    { label: "Comedy", value: "comedy" },
    { label: "Entertainment", value: "entertainment" }
  ];

  return (
    <form noValidate autoComplete='off' onSubmit={onSubmit}>
      <Card style={styles.card}>
        <CardContent>
          <Box padding={3}>
            <FormLegend title={`${formTitle} (${channels.length})`} description={formDescription} />
            <Box marginTop={3} width='50%'>
              <Grid container direction='column' justify='flex-start' alignItems='stretch' spacing={1}>
                {channels.map(channel => {
                  return (
                  <Grid key={channel.key} item style={styles.gridItem} justify="space-between">
                    <ChannelListItem
                      channel={channel}
                      isSaving={isSaving}
                      onDeleteChannelClick={onDeleteChannelClick}
                      key={channel.Key}
                      onFormControlChange={onFormControlChange} 
                      onUndoChannelClick={onUndoChannelClick}
                    />
                    <ChannelCategory
                      key={channel.key}
                      options={options}
                      onChange={value => onAddCategory(value)}
                      title="Add your chatroom to a category so that users can find it easily"
                      checked={checked}
                    />
                  </Grid>
                  )
                })}
          [...]
                </Grid>
              </Grid>
            </Box>
          </Box>
        </CardContent>
      </Card>

    </form>
  );

Answer 1

Instead of storing true or false inside the checked variable, you should store the value inside of checked. Like this:

const onChangeAttribute = (value) => {
  console.log(value);
  setCheckBoxChecked(value);
};

And now while rendering the checkbox you should check if checked is equal to the name of that checkbox like this:

<input
     className={props.className}
     name={option.value}
     checked={props.checked === option.value}
     onChange={() => props.onChange(option.value)}
     type="checkbox"
/>

This should resolve your issue.