How to bind array or array of objects to radio buttons in React?

Question

How to bind array or array of objects to radio buttons in React?

Answer

You can loop through an array and render radio buttons dynamically with map().

import { useState } from 'react';

function GenderSelector() {
  const [selected, setSelected] = useState('');

  const genders = ['Male', 'Female', 'Other'];

  return (
    <div>
      {genders.map((g, i) => (
        <label key={i}>
          <input
            type='radio'
            value={g}
            checked={selected === g}
            onChange={(e) => setSelected(e.target.value)}
          />
          {g}
        </label>
      ))}
      <p>Selected: {selected}</p>
    </div>
  );
}

✅ For objects:

const options = [
  { id: 1, label: 'Frontend' },
  { id: 2, label: 'Backend' },
];

{
  options.map((opt) => (
    <label key={opt.id}>
      <input
        type='radio'
        value={opt.id}
        checked={selected === String(opt.id)}
        onChange={(e) => setSelected(e.target.value)}
      />
      {opt.label}
    </label>
  ));
}

Real-World Example

• Selecting gender, country, or category from a dynamic list.
• Choosing a payment method or delivery option.

Quick Practice

Build a “Select Role” component that lets users pick their role using radio buttons and shows the selected role below.

Summary

Use map() to loop through arrays and render dynamic radio buttons with a single state hook.