CODEWITHSUNDEEP
reactjsradio-button
Rizwan Ashraf
Rizwan Ashraf

Reputation: 117

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

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>
))

Upvotes: 0

Views: 1544

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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.

Upvotes: 1

Related Questions