How to select all radio button by default inside loop in react

Question

I am new to react, I want to select all radio buttons inside map loop.I am setting defaultChecked={index}, but it only selects the last radio button and the same is true for checked prop. Kindly help me.

availableCars.map((item, index) => (
  <div className="item" key={index}>
    <div className="carbox">
      <div className="bluebg" />
      <div className="choosedesc">
        <h4>{item.vehicle_name}</h4>
      </div>
      <div>
        <div className="selecttrip">
          {!roundTrip || !oneWayTrip ? (
            <React.Fragment>
              {selectTripTypeError}
            </React.Fragment>
          ) : null}
          <label className="radiowrap">
            Round Trip{' '}
            <span className="blue">
              {item.rt_price}
              {item.currency == 'EUR'
                ? '€'
                : 'GBP'
                  ? '£'
                  : item.currency}
            </span>
            <input
              type="radio"
              value={item.rt_price}
              defaultChecked={index}
              onChange={e =>
                onRoundTripChecked(
                  item.rt_price,
                  item.vehicle_id,
                  item.currency,
                  item.seconds_before_pick,
                  item.max_pax,
                  item.release_hours,
                )
              }
              name="radio"
            />
            <span className="checkmark" />
          </label>

        </div>

      </div>
    </div>
  </div>
))

95faf8e76605e973 · Accepted Answer · 2020-08-22 10:13:15Z

1

I am setting defaultChecked={index}, but it only selects the last radio button and the same is true for checked prop.

This is because they all belong to the same radio group (which you have defined in your code as name="radio").

From MDN:

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

Try to give your radio buttons unique names:

const App = () => {
  let sampleArray = ["foo","bar","joe"];
  
  return (
    <div>
      {sampleArray.map(function(value, index){
        return (
          <div>
            <input
              type="radio"
              defaultChecked={true}
              name={`radio-${index}`}
            />
            <label>{value}</label>
          </div>
        )
      })}
    </div>
  )
}

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

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

On a UX perspective, radio input are usually used to indicate a selection from an input group. I can't see your project layout as of this writing, but I suggest you look into using checkboxes.

Lastly, I recommend passing boolean values to defaultChecked prop. Passing index will fail to set the checked attribute to true if you pass a falsy.

edited Aug 22, 2020 at 10:13

answered Aug 22, 2020 at 10:06

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

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

2 Comments

Rizwan Ashraf Over a year ago

I have done as you said and it worked.but it is not selecting the first radio button and all others are selected. Can you point out the mistake? Thank you so much.

95faf8e76605e973 Over a year ago

yes, you are probably passing a javascript falsy. please have a look at the very last sentence in my answer. try to pass true to the prop instead of index, for example

Collectives™ on Stack Overflow

How to select all radio button by default inside loop in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related