S
S
SehiiSkachkov2019-01-27 22:56:40
React
SehiiSkachkov, 2019-01-27 22:56:40

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

1 answer(s)
0
0xD34F, 2019-01-27
@SehiiSkachkov

For example

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question