Render a radio button as already selected on page load - React js

Question

I have this component:

import React from 'react';

const options = [
  { label: "Lifestyle", value: "lifestyle"},
  { label: "Area", value: "area" },
  { label: "Random", value: "random" }
];
const ChannelCategory = props =>
  props.visible ? (
    <div>
      {props.title}
      <ul>
        {options.map((option) => (
          <li key={option.value}>
            <label>
              {option.label}
              <input
                className={props.className}
                name={props.name} // need to be different
                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 rendering it on another page here in a .map:

  let displayExistingChannels = null;
  if (channels !== null){
   displayExistingChannels = (
      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}
            />
            {channel.category}
            <ChannelCategory
              visible={true}
              onChange={value => setCategoryName(value)}
              title="Edit Category"
              selected={channel.category}
              name={channel.key} // unique for every channel
            />
          </Grid>
        )
      })
    )
  }

I am using fake data for the map:

const fakeChannelData = setupChannels(
[{id: "2f469", name: "shopping ", readOnly: false, category: "lifestyle"},
 {id: "bae96", name: "public", readOnly: true, category: "null"},
  {id: "06ea6", name: "swimming ", readOnly: false, category: "sport"},
  {id: "7e2bb", name: "comedy shows ", readOnly: false, category: "entertainment"}]);

 const [channels, setChannels] = useState(fakeChannelData);

Please can someone tell me why when I add selected={channel.category} in my .map function it does not show the selected category preselected on the FE on page load? Not sure where I have gone wrong? Thanks!

Does this answer your question? [Assign an initial value to radio button as checked](https://stackoverflow.com/questions/4711036/assign-an-initial-value-to-radio-button-as-checked) — Heretic Monkey, Jun 08 '20 at 16:18

aquinq · Answer 1 · 2020-06-08T17:26:11.143

1

checked is the correct attribute to use for input tag, not selected.

<input
  ...
  checked={props.selected === option.value}
  ...
/>

ref: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

edited Jun 08 '20 at 17:26

answered Jun 08 '20 at 16:10

aquinq

1,318
7
18

in the `ChannelCategory` I have to write the above? – Angela Inniss Jun 08 '20 at 17:19
1

You only have to replace `selected` by `checked` in the `input` tag, you can keep it elsewhere – aquinq Jun 08 '20 at 17:21
ok got it like this: ` checked={props.selected === option.value} ` yes it works but only for my first `ChannelCategory` when I map over it. Could this be because i'm using a `radio` button? The outcome I wanted was to have a radio button selected for each `channel` category depending on the data in my `channels` state...hmm – Angela Inniss Jun 08 '20 at 17:24

Render a radio button as already selected on page load - React js

1 Answers1