How to get the value from button group in react component

Question

Below is the button group component which I used inside the form.How to implement the onchange functions to this button group.I have no Idea how to set the onchange method

import React, {Component} from "react";
import {Popover, OverlayTrigger} from 'react-bootstrap';
import "./ButtonGroup.scss";
const popoverBottom = () =>{
return (
   <Popover className="tooltip-popover" title="Here is the where you 
   give a tooltip">
   </Popover>
);
} 

export const ButtonGroup = ({
 tooltip,
 label,
 options,
 selected,
 lableStyle = {},
 Title = "Tooltip on top",
}) => {
 return (
  <div className="nuclei-group">
  <p className="nuclei-buttongroup-input"> {label} </p>
  <div data-toggle="buttons">
    {options.map((option, i) => {
      const className = selected == option.value ? "active" : "";
      return (
        <label
          key={i}
          style={lableStyle}
          className={`btn btn-default nuclei-selection-option ${className}`}
        >
          <input
            type="radio"
            name={"name"}
            id={option.value}
            autoComplete="off"
          />
          {option.label}
        </label>
      );
    })}
    {tooltip ? (
      <span>
        <OverlayTrigger trigger="click" rootClose placement="bottom" overlay={popoverBottom()}>
          <button type="button" className="btn  nuclei-tooltip">?</button>
        </OverlayTrigger>
      </span>
    ) : null}
  </div>
</div>
);
};

export default ButtonGroup;

then I tried to add on change as below and after submitting the form it doesn't work can somebody help me to resolve it.Normally inside a input tag it works but here? and let me know is this the best way to get values from a form as in the code below

import React, {Component} from "react";
import "./classic-quote.scss";
import {Button, ButtonGroup, InputText} from "../../../components";
import StepBreadcrumb from "../../../components/StepBreadcrumb";
import HeaderTitle from "../../../components/HeaderTitle";
import axios from 'axios';
export default class ClassicQuote extends Component {

constructor(props){
 super(props);

 this.state = {
  insurance_type:'',
  vehicle_registration:'',
  lease_loan_hire:'',
  estimated_market_value:'',
  usage:'',
  make:'',
  model:'',
  year:'',
  claim_bonus_year:''
}

this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange1 = this.handleChange1.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
this.handleChange3 = this.handleChange3.bind(this);
this.handleChange4 = this.handleChange4.bind(this);

}

handleChange1(e){
 this.setState({
   make: e.target.value
 })
}

handleChange2(e){
  this.setState({
    model: e.target.value
  })
}

handleChange3(e){
  this.setState({
    year: e.target.value
  })
}

handleChange4(e){
  this.setState({
    insurance_type: e.target.id
  })
}

handleSubmit(e){
 e.preventDefault();
 const quotation = {
   make: this.state.make,
   model: this.state.model,
   year: this.state.year,
   insurance_type: this.state.insurance_type
 }
console.log('gggggggg'+quotation.make+quotation.model+quotation.year+quotation.insurance_type);
let uri = '/items'
axios.post(uri,quotation).then(response => {
  console.log('ela');
}).then(error => {
  console.log(error);
});
}

 render() {
  return <div>
    {/* <StepBreadcrumb id="bred" /> */}
    <div className="container insureme-form zero-padding">
    <form onSubmit={this.handleSubmit}>
    <div className="row">
      <HeaderTitle mainFirstWord="Insurance" restOfTitle="Detail" headerStyle={{fontWeight: "bold"}} headerIcon={true} />
      <div className="nuclei-insurance-detail-step-one">
        <div className="col-md-12 col-sm-12 col-xs-12">
          <ButtonGroup onChange={this.handleChange4} label="" selected="full" options={[{label: "Full Insurance", value: "full"}, {label: "3rd Party Insurance", value: "3rd"}]} tooltip />
         <pre>{JSON.stringify(this.state, '', 2)}</pre>
        </div>

        <div className="col-md-12 col-sm-12 col-xs-12">
          <ButtonGroup label="Do you have a vehicle registration No?" selected="Yes" options={[{label: "Yes", value: "Yes"}, {label: "No", value: "No"}]} tooltip />
        </div>

        <div className="col-md-12 col-sm-12 col-xs-12">
          <ButtonGroup label="Do you have any lease,Loan or hire on vehicle?" selected="Yes" options={[{label: "Yes", value: "Yes"}, {label: "No", value: "No"}]} tooltip />
        </div>

        <div className="col-md-4 col-sm-4 col-xs-8">
          <InputText label={"Estimated Market Value?"} placeholder="Rs." />
        </div>

        <div className="col-md-12 col-sm-12 col-xs-12">
          <ButtonGroup label="Usage?" selected="Private" options={[{label: "Private", value: "Private"}, {label: "Hire", value: "Hire"}, {label: "Rent", value: "Rent"}]} tooltip />
        </div>

        <div className="col-md-12 col-sm-12 col-xs-12 form-group input-text ">
          <label>Make, Model and Year of Manufacture? </label>
          <div className="col-md-4 col-sm-4 col-xs-4 zero-padding-left">
            <input type="text" className="form-control" id={"make-manufacture"} placeholder={"Make"} onChange={this.handleChange1} />
          </div>

          <div className="col-md-3 col-sm-3 col-xs-4 zero-padding-left">
            <input type="text" className="form-control" id={"model-manufacture"} placeholder={"Model"} onChange={this.handleChange2}/>
          </div>

          <div className="col-md-2 col-sm-2 col-xs-3 zero-padding-left">
            <input type="text" className="form-control" id={"year-manufacture"} placeholder={"Year"} onChange={this.handleChange3}/>
          </div>
        </div>

      <div className="col-md-12 col-sm-12 col-xs-12 form-group input-text">
          <label>No Claims Bonus?</label>
          <div className="col-md-4 col-sm-4 col-xs-8 zero-padding-left">
            <InputText tooltip placeholder="No. of Years" />
          </div>
        </div>


        <div className="col-md-12 col-sm-12 col-xs-12">
          <Button type="submit" color="red" className="nuclei-bottom-red-button">
            Get a Quick Quote
          </Button>
          <Button type="clear" color="gray" className="nuclei-bottom-gray-button">
            Clear
          </Button>
        </div>
      </div>
    </div>
    </form>
    </div>
  </div>;
 }
}

I tried several ways can get only the make model and year values as printed in the console log

Answer 1

I saw that you update the form, but you didn't add "onChange" in the ButtonGroup Component file like in the comment:

export const ButtonGroup = ({
 onChange,   <---this
 tooltip,
 label,
 options,
 selected,
 lableStyle = {},
 Title = "Tooltip on top",
}) => {
 return (
  <div className="nuclei-group">
  <p className="nuclei-buttongroup-input"> {label} </p>
  <div data-toggle="buttons">
    {options.map((option, i) => {
      const className = selected == option.value ? "active" : "";
      return (
        <label
          key={i}
          style={lableStyle}
          className={`btn btn-default nuclei-selection-option ${className}`}
        >
          <input
            onChange={onChange} <---this
            type="radio"
            name={"name"}
            id={option.value}
            autoComplete="off"
          />
          {option.label}
        </label>
      );
    })}

Answer 2

if you want to pass an handler like this:

onChange={this.handleChange4}

you have to add it to the props you receive in Component:

export const ButtonGroup = ({
 onChange,
 tooltip,
 label,
 options,
 selected,
 lableStyle = {},
 Title = "Tooltip on top",
}) => {
 ...

and then in the input elements call onChange:

          <input
            onChange={onChange}
            type="radio"
            name={"name"}
            id={option.value}
            autoComplete="off"
          />

If you want to see the complete solution, I build it in sandbox: Full example here