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 ponent 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: "edy" },
  { 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 ponent 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 === "edy") {
      setCheckBoxChecked(checked => !checked); 
    }
  };

[...]
  const options = [
    { label: "Lifestyle", value: "lifestyle"},
    { label: "Area", value: "area" },
    { label: "Random", value: "random" },
    { label: "Comedy", value: "edy" },
    { 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>
  );

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 ponent 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: "edy" },
  { 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 ponent 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 === "edy") {
      setCheckBoxChecked(checked => !checked); 
    }
  };

[...]
  const options = [
    { label: "Lifestyle", value: "lifestyle"},
    { label: "Area", value: "area" },
    { label: "Random", value: "random" },
    { label: "Comedy", value: "edy" },
    { 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>
  );

• javascript
• reactjs

• Can you show us the definition of the method onAddCategory that you use in the prop onChange aswell as the rest of the code involving the variable checked? – 0bero Commented Jun 2, 2020 at 12:00
• @ÁlvaroTihanyi hi done, I updated the code. I had the wrong name for the method. Should be right now – Angela Inniss Commented Jun 2, 2020 at 12:10
• 1 use a radio button ! – Mechanic Commented Jun 2, 2020 at 12:22

2 Answers 2

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.

Use an array to store all checked boxes and in your ChannelCategory check if the current value exists in the checked array then set checked to true for that checkbox. If you want to select only one category use radio buttons

const {useState, useEffect} = React;

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

const ChannelCategory = props => {
  return (
    <div>
      {props.title}
      <ul>
        {props.options.map(option => (
          <li key={props.key}>
            <label>
              {option.label}
              <input
                className={props.className}
                name={option.value}
                checked={props.checked.includes(option.value)}
                onChange={e => props.onChange(e.target.checked, option.value)}
                type="checkbox"
              />
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
};

function App() {
  const [checked, setCheckBoxChecked] = useState([]);

  const onAddCategory = (isChecked, value) => {
    const temp = [...checked];

    if (isChecked) {
      temp.push(value);
      setCheckBoxChecked(temp);

      return;
    }

    setCheckBoxChecked(temp.filter(item => item !== value));
  };

  return (
    <div className="App">
      <ChannelCategory
        key={"channel.key"}
        options={options}
        onChange={onAddCategory}
        title="Add your chatroom to a category so that users can find it easily"
        checked={checked}
      />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Radio buttons example