how to update dynamically generated form in react js - reactjs

Question

I have a code here where I have to do update operation. I'm generating the form fields dynamically based on the result of get operation. The form fields are pre-populated. On change event on the input field in triggering an error data.map is not a function on keypress. I can change for single fields with different names. But unable to update json array state. Please help. I have attached the code snippet below.
export default class PocDetail extends React.Component {
constructor(props) {
super(props);
this.state={
isLoading:true,
editData:[],
};
}
componentDidMount(){
this.renderData();
}
renderData(){
var self = this;
const getOrgId =
window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
const url = "some api";
get(url+"Organisation/"+getOrgId+"/pointOfContacts/").then(function (response) {
console.log(response.data);
self.setState({
editData:response.data,
isLoading:false
})
}).catch(function (error) {
console.log(error);
});
}
putData =(e)=>{
e.preventDefault();
}
//edit permission for input fields
inputChangedHandler = (event) => {
this.setState({ editData: { ...this.state.editData,[event.target.name]:event.target.value} });
// May be call for search result
}
//the view
render() {
const {isLoading,editData} = this.state;
if(isLoading){
return <Loader />;
}
return (
<div>
<Row style={{paddingTop:'20px',paddingBottom:'40px',marginLeft:'auto',marginRight:'auto'}}>
<Col lg="8" md="8" sm="8">
<Form id="bankForm" onSubmit={this.putData}>
<ToastContainer store={ToastStore}/>
{
editData.map(data=>{
return(<Row key={data.id}>
<Col lg="6" md="6" sm="6">
<FormGroup>
<Label className="createLabelStyle" for="title">Title</Label>
<Input className="createInputStyle" type="text" name="title" id="title" autoComplete="off" value={data.title} onChange={(event)=>this.inputChangedHandler(event)} required/>
</FormGroup>
<FormGroup>
<Label className="createLabelStyle" for="first_name">First name</Label>
<Input className="createInputStyle" type="text" name="first_name" id="first_name" value={data.first_name} onChange={(event)=>this.inputChangedHandler(event)} autoComplete="off" required/>
</FormGroup>
<FormGroup>
<Label className="createLabelStyle" for="contact_number">Contact Number</Label>
<Input className="createInputStyle" type="text" name="contact_number" id="contact_number" autoComplete="off" value={(data.contact_number==null)?"":data.contact_number} onChange={(event)=>this.inputChangedHandler(event)} required/>
</FormGroup>
</Col>
<Col lg="6" md="6" sm="6">
<FormGroup>
<Label className="createLabelStyle" for="email">Email ID</Label>
<Input className="createInputStyle" type="text" name="email" value={data.email} onChange={(event)=>this.inputChangedHandler(event)} id="email" autoComplete="off" required/>
</FormGroup>
<FormGroup>
<Label className="createLabelStyle" for="last_name">Last name</Label>
<Input className="createInputStyle" type="text" name="last_name" value={data.last_name} onChange={(event)=>this.inputChangedHandler(event)} id="last_name" autoComplete="off" required/>
</FormGroup>
</Col>
</Row>);
})
}
<Button className="createSubmitStyle">Add</Button>{' '}
<Button className="createSubmitStyle">Update</Button>
</Form>
</Col>
</Row>
</div>
);
}
}

Answer 1

In the renderData function variable editData is an Array that's why it is rendering your form properly but in the inputChangedHandler function you are updating editData to an Object hence the issue

Answer 2

Please try this snippet:
editData!=undefined &&editData.map(data=>{});

Answer 3

I found out the solution. Adding this code below solved the problem. I needed to add index with map to update the property value of object.
inputChangedHandler(i,event){
let data = [...this.state.editData];
data[i][event.target.name] = event.target.value;
console.log(data[i][event.target.name]);
this.setState({editData:data});
}