Answer the question
In order to leave comments, you need to log in
How to create a group of radio buttons?
Good evening everyone.
Do not judge strictly, I'm new to React.
The essence of the question is how to create a group of radio buttons, so that 1 radio button is checked and the class is added, when onChange the check and class change
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 the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question