State will not remain for radio buttons once clicked 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 radio buttons 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 =>
  props.visible ? (
    <div>
      {props.title}
      <ul>
        {options.map((option) => (
          <li key={props.key}>
            <label>
              {option.label}
              <input
                className={props.className}
                name="test"
                selected={props.selected === option.value} // e.g. lifestyle === lifestyle
                onChange={() => props.onChange(option.value)}
                type="radio"
              />
            </label>
          </li>
        ))}
      </ul>
    </div>
) : null;


export default ChannelCategory;

I am using this component in another componentso that when the user creates a channel they can also add a category. My issue is that when a user selects a category for one channel it's fine, however when they select a category for another channel in the list, the category for the previous channel disappears and so on and so fourth.

[...]

export default function Channels() {

  const [channelName, setChannelName] = useState('');
  const [channels, setChannels] = useState(channelData);

[...] 

  const onFormControlChange = (event, key) => {
    if (event.target.value.length <= 100) {
      if (channels[key]) {
        let existingChannels = [...channels];
        existingChannels[key].name = event.target.value;
        setChannels(existingChannels);
      } else {
        setChannelName(event.target.value); 
      }
    }
  };

  const onAddCategory = (value, key) => {
    let existingChannels = [...channels]; 
      if (existingChannels[key]) {
     existingChannels[key].category = value; 
   }
    setChannels(existingChannels); 
  };

  const onAddChannelClick = () => {
    if (channelName === '') {
      return;
    }
    let existingChannels = [...channels];
    let newChannel = {
      key: existingChannels.length,
      name: channelName,
      deletable: true,
      markedForDelete: false,
      category: null
    };
    existingChannels.push(newChannel);
    setChannels(existingChannels);
    setChannelName('');
  };

[...]

  return (
    <form noValidate autoComplete='off' onSubmit={onSubmit}>
      <Card style={styles.card}>
      [...]
        <CardContent>
          <Box padding={3}>
         [...]
            <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}
                    />
                      <Grid>
                        <ChannelCategory
                          key={channel.key}
                          visible={true}
                          onChange={value => onAddCategory(value, channel.key)}
                          title="Add your channel to a category so that users can find it."
                          selected={channel.category}
                        />
                      </Grid>

                  </Grid>
                  )
                })}
                <Grid item style={styles.gridItem}>
                  <ChannelFormControl
                    channelName={channelName}
                    isSaving={isSaving}
                    onFormControlChange={onFormControlChange}
                    onAddChannelClick={onAddChannelClick} 
                    onAddChannelKeyPress={onAddChannelKeyPress}
                  />
                </Grid>
        [...]
                </Grid>
              </Grid>
            </Box>
          </Box>
        </CardContent>
      </Card>
     [...]
    </form>
  );
}

Can anyone advise why this is happening? I think I need to somehow store the state for each category once it's been clicked but I am not sure how. Thanks in advance!

Answer 1

It happens because all radio inputs have same name="test", change name to be something dynamic like name={option.label} and you will be able to select multiple buttons.

another way is to use type='checkbox' instead of radio