Как создать группу радио кнопок?

Question

[SehiiSkachkov]

Всем добрый вечер.
Не судите строго я новенький в реакте.
Суть вопроса как создать группу радио кнопок , что бы 1 радио кнопка была чекнута и лбл дабовлялся клас , при оnChange смена чека и класса

import React, { Component } from "react";
import Request_сheck from './Request_lbl_check.png';
import RequestRadioGroup from './RequestRadioGroup/RequestRadioGroup';
import Request_sedan from './request_sedan.png';
import Request_small from './request_small.png';
import Request_sports from './request_sports.png';
import Request_ponoram from './request_ponoram.png';
import Request_jeep from './request_jeep.png';
import './RequestForm.sass';

class RequestForm extends Component {
	state = {
	    rq_car: [
            { rq_img: Request_sedan, rq_val: "sedan" },
            { rq_img: Request_jeep, rq_val: "jeep"},
            { rq_img: Request_small, rq_val: "small"},
            { rq_img: Request_sports, rq_val: "sports"},
            { rq_img: Request_ponoram, rq_val: "ponoram"}
        ]
    }

	render() {

		const rq_car = this.state.rq_car

		return (
			<form className="request-form">

				<div className="request-car-box">
				    {rq_car.map((rq_car,index) => {
                   		return (
                   		    <RequestRadioGroup
                   		    	key={index}
                   		    	id={rq_car.rq_val}
                   		    	img={rq_car.rq_img}
                   		    	value={rq_car.rq_val}
                   		    />
                   		)
                	}) }
				</div>
			</form>
		)}
	}

export default RequestForm;

import React, { Component } from "react";
---------------------------------------------------------
const RequestRadioGroup = (props) => {
		return (
			<>
				<input 
					type="radio"
					id={props.id}
					name= "car-type"
					value={props.value}
				/>
				<label htmlFor={ props.id}>
					<img src={props.img}/>
				</label>
			</>
		)
	}

export default RequestRadioGroup;

Answer 1

[0xD34F]

const RadioGroup = props => (
  <div>
    {props.items.map(n => (
      <label className={`radio ${n.val == props.value ? 'selected' : ''}`}>
        <input 
          type="radio"
          name={props.name}
          value={n.val}
          checked={n.val === props.value}
          onChange={props.onChange}
        />
        <img src={n.img} />
      </label>
    ))}
  </div>
);

https://jsfiddle.net/jt2ybfrq/

Comments

[SehiiSkachkov]

Как вызвать чекед у первого динамического радио батона ?

[0xD34F]

"Вызвать чекед" - что вы имеете в виду?

[SehiiSkachkov]

0xD34F, Да

[0xD34F]

Что "да"? Ещё раз: что вы имеете в виду под словами "вызвать чекед"? Объясните, а то непонято.

[SehiiSkachkov]

0xD34F,Я имею введу , как при генерации динамических радио баттанов сделать 1 рабио баттон что бы был в состоянии выбранного.

[0xD34F]

Значение соответствующее передавайте.

[SehiiSkachkov]

0xD34F, да я не пойму как , в обьекте добавить чек тру ?
а у остальных пустое значение , и при клике перерисовывать Дефаулт чек или как ?

[0xD34F]

Обновил пример.

[SehiiSkachkov]

0xD34F, Весьма благодарен вам, спасибо вам больше.