On Change in React

 index.js

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import 'bootstrap/dist/css/bootstrap.css';

import "@popperjs/core/dist/umd/popper";

import InputForm from "./InputForm";

//import DataBoundComponent from "./DataBoundComponent";

let container = document.getElementById("root");

ReactDOM.render(

  <div className="container">

  

  <InputForm></InputForm>

   {/* <DataBoundComponent/> */}

   

    </div>, container);

InputForm.js

import React from "react";

export default class InputForm extends React.Component {

    constructor(props)

     {

                super(props);

                this.state = {

                    st: 'Maharashtra',

                    FirstName: '',

                    LastName: null,

                    Address:'',

                    Billing:true,

                    gender:'Female',

                    isChecked: false,

                };

                this.ChooseGender = this.ChooseGender.bind(this);

                this.myChangeHandler = this.myChangeHandler.bind(this);

                this.changeState=this.changeState.bind(this);

                this.handleChecked = this.handleChecked.bind(this);

     }

      myChangeHandler = (event) => {

        let FirstName = event.target.name;

      

        let Address = event.target.value;

    

        this.setState({[FirstName]: Address});

       

      }

     changeState=(event)=>{

        this.setState({st: event.target.value});

     }

     ChooseGender=(event)=>{

        this.setState({gender: event.target.value});

     }

     handleChecked () {

        this.setState({isChecked: !this.state.isChecked});

      }

    render() {

        var txt;

    if (this.state.isChecked) {

      txt = 'True'

    } else {

      txt = 'False'

    }

      return (

        <div class="container" style={{margin: "auto",

        width: "30%",border: "3px solid #73AD21",  padding: "10px"}}>

                <form>

                <p >

                        <input

                        placeholder="FirstName"  

                        type='text'

                        name='FirstName'

                        

                        onChange={this.myChangeHandler}

                       

                        />

                </p>

                <p>

                    <input

                    placeholder="LastName"  

                    type='text'

                    name='LastName'

                  

                    onChange={this.myChangeHandler}

                    />

                </p>

                    <textarea 

                            placeholder="Address" 

                            name="Address" type="text"

                           

                           

                            onChange={this.myChangeHandler}

                    /><br></br>

                    <label>Is your Billing Address is same :

                         <input type="checkbox" onChange={ this.handleChecked }/>

                    </label>

                

                <p>

                        <label>

                            State:

                            <select value={this.state.st} onChange={this.changeState} >

                               

                                <option value="Maharashtra">Maharashtra</option>

                                <option value="Rajasthan">Rajasthan</option>

                                <option value="karnatak">karnatak</option>

                                <option value="Madhya Pradesh">Madhya Pradesh</option>

                            </select>

                        </label>

                

                </p>

                

                Gender: <br></br>

                        <div onChange={this.ChooseGender} value={this.state.value}  

                        

                            style={{paddingTop:"4px" }}>

                            <input type="radio" value="Male" name="gender" /> Male

                            <input type="radio" value="Female" name="gender" /> Female

                            

                        </div>

                

                

                <legend>Summary:</legend>    

            

                <h6>First Name: {this.state.FirstName}{this.state.LastName}</h6>

                <h6>Address: {this.state.Address}</h6>

                <h6>Is Billing Address Same: {txt}</h6>

                <h6>State: {this.state.st}</h6>

                <h6>Gender: {this.state.gender}</h6>

                <button >Save</button>

                </form>

        </div>

      );

    }

  }

  

output: