table modal won't read any other rows reactjs - asp.net

Question

I have a problem it only reads the first row item, i dont know why it does that.. how can i use foreach loop for this... or any kind of code so it will work because it doesn't read any other row besides the first one im so confused because I haven't done reactjs before
PS: the data came from an api from asp.net...
you can check the image here
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address}</td>
<td><center>
<button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}

Answer 1

import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
constructor() {
super();
this.state = { jsonReturnedValue: [] }
}
renderItem(d, i) {
debugger
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}`

Answer 2

I think something like this should work
import React from 'react';
import 'whatwg-fetch';
export default class employee extends React.Component {
let index = -1;
constructor() {
super();
this.state = { jsonReturnedValue: [] ,
name: '',
address: ''
}
}
renderItem(d, i) {
debugger
index++;
let name = d.Employee_Name;
let address = d.Address;
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) } data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={this.state.jsonReturnedValue[index].Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={this.state.jsonReturnedValue[index].Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}
componentDidMount() {
fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
.then((response) => {
return response.json()})
.then((json) => {
this.setState({jsonReturnedValue : json});
});
}
render() {
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Adding*/}
<div className="modal fade" id="AddEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Add New Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name={this.props.Employee_Name}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name={this.props.address}
className="EmployeeDetails"
value={this.props.value}
onChange={this.props.handleChange}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
}