InputRadio.jsx

import React, { useState } from 'react'
import './App.css'

const VueForm = ({ checkedValue }) => (
  <p>
    現在選択されている値：<b>{checkedValue}</b>
  </p>)

const RadioBtnItems = ({ handleChange, checkedValue, values }) => (
  values.map(v =>
    <label key={v.id}>
      <input
        type='radio'
        value={v.item}
        onChange={handleChange}
        checked={checkedValue === v.item}
      />
      {v.item}
    </label>
  )
)

const InputRadio = ({ values }) => {
  const INITIAL_VALUE = values[0].item
  const [checkedValue, setCheckedValue] = useState(INITIAL_VALUE)
  const handleChange = (e) => setCheckedValue(e.target.value)

  return (
    <div className='App'>
      <VueForm checkedValue={checkedValue} />
      <RadioBtnItems
        handleChange={handleChange}
        checkedValue={checkedValue}
        values={values}
      />
    </div>
  )
}

export default function App () {
  const values = [
    { id: 1, item: 'red' },
    { id: 2, item: 'blue' },
    { id: 3, item: 'yellow' }
  ]

  return <InputRadio values={values} />
}