How to set a defaultChecked to only first input in radio button when using map function in reactjs

Question

I am trying to use defaultChecked in reactjs when using map function to only one radio button. But How can I acomplish it?

{colors.map((color, index) => {
      return (
        <label className="color-checkmark" key={index}>
          <input
            type="radio"
            checked="checked"
            name="color"
            value={color}
            // defaultChecked
          />
        </label>
      );
    })}

If I use defaultChecked there it will be set to every radio button.

which item do you want checked by default?

Junius L
– Junius L

2019-05-19 20:14:01 +00:00
Commented May 19, 2019 at 20:14 — Junius L
– Junius L, Commented May 19, 2019 at 20:14
First item to be checked by default.

Dipesh Bajgain
– Dipesh Bajgain

2019-05-19 20:14:39 +00:00
Commented May 19, 2019 at 20:14 — Dipesh Bajgain
– Dipesh Bajgain, Commented May 19, 2019 at 20:14

k.s. · Accepted Answer · 2020-06-20 20:28:24Z

4

You need to remove the checked="checked" attribute as it conflicts with the defaultChecked attribute. And then add defaultChecked={index === 0}

edited Jun 20, 2020 at 20:28

answered May 19, 2019 at 20:29

k.s.

3,0041 gold badge27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Junius L · Accepted Answer · 2019-05-19 20:43:45Z

3

If you want the first item checked

{colors.map((color, index) => {
  return (
    <label className="color-checkmark" key={index}>
      <input
        type="radio"
        name="color"
        value={color}
        defaultChecked={!(!!index)}
      />
    </label>
  );
})}

what does !! do?

the !! ensures that the value will always be a boolean or converted to a boolean.

edited May 19, 2019 at 20:43

answered May 19, 2019 at 20:15

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

5 Comments

Dipesh Bajgain Over a year ago

This didn't work. It just checked every radio button.

Junius L Over a year ago

using the index?

Dipesh Bajgain Over a year ago

yes using index also it just set every radio button as checked in HTML DOM.

Junius L Over a year ago

see the code above and remove checked="checked" from the input.

k.s. Over a year ago

you don't actually need to do !(!!index) in this case, since it's a zero index, you can do !index and it will evaluate to true.

soywod · Accepted Answer · 2019-05-19 20:28:30Z

2

You need to add a condition to your defaultChecked, and remove the checked property:

const colors = ['blue', 'green', 'red']

function App() {
  return colors.map((color, index) => (
    <label key={index}>
      <input
        type="radio"
        name="color"
        value={color}
        defaultChecked={index === 0}
      />
      <span style={{color}}>{color}</span>
    </label>
  ))
}

ReactDOM.render(<App />, document.getElementById('app'))

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

<div id="app">euoeu</div>

edited May 19, 2019 at 20:28

answered May 19, 2019 at 20:10

soywod

4,5784 gold badges29 silver badges50 bronze badges

3 Comments

Dipesh Bajgain Over a year ago

I just want my first radio button to be checked by default without any criteria.

soywod Over a year ago

I updated my answer then. You need to set defaultChecked only if index === 0. Don't forget to remove the checked property you put in your example.

soywod Over a year ago

It does for me, see the example. It means you forgot something, check again.

Collectives™ on Stack Overflow

How to set a defaultChecked to only first input in radio button when using map function in reactjs

3 Answers 3

Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related