want to set value to an array key in react state

Question

In the below code I have a state inside in emplist array with some keys and by onchange() event i want to set the value to emplist array keys. How can i set that values please help me :).

import React from 'react';

export default class Registrations extends React.Component{
   constructor(props){
     super(props);
      this.state = {
        EmployeeList:[
            { EmployeeId : '' },
            { EmployeeName :'' },
            { EmployeeSalary :'' },
            { EmployeeAddress : '' },
            { EmployeeDetails :false },
        ],
    };
}

handleChange = (e) =>{
    // some code actions//
}

  render(){
    var {EmployeeId,EmployeeName,EmployeeSalary,EmployeeAddress} = this.state;
    return(
            <div>
                <form>
                    <input type="text" placeholder="Enter EmployeeId" onChange={this.handleChange} 
                     value={EmployeeId} name='EmployeeId'/><br />
                    <input type="text" placeholder="Enter EmployeeName" onChange={this.handleChange} 
                     value={EmployeeName} name='EmployeeName'/><br />
                    <input type="text" placeholder="Enter EmployeeSalary" onChange= 
                     {this.handleChange} value={EmployeeSalary} name='EmployeeSalary'/><br />
                    <input type="text" placeholder="Enter EmployeeAddress" onChange= 
                      {this.handleChange}  value={EmployeeAddress} name='EmployeeAddress'/><br />
                    <button onClick={this.handleSubmit}>Submit</button>
                </form>
            </div>
        );
    }
    }

Answer 1

Can you explain more about what you want to do.

In your code above, you type in the data for each piece of data inside a single employee object, so you state should has this shape:

this.state = {
  Employee: {
    EmployeeId: '',
    EmployeeName: '',
    EmployeeSalary: '',
    EmployeeAddress: '',
    EmployeeDetails: false
  }
};

  handleChange = (e) => {
    this.setState({
      Employee: {...this.state.Employee, [e.target.name]: e.target.value }
    })
  };

  render() {
    var {
      EmployeeId,
      EmployeeName,
      EmployeeSalary,
      EmployeeAddress,
    } = this.state.Employee; // change the destructuring as well
  }