State array updating on next click - reactjs

Question

I have 3 state values: username, password and address, and corresponding 3 textboxes where I am including the values in the respective states. Now I want that on click of a submit button, these states should be added on a state array called add_data:
state:
this.state = {
uname: '',
pass: '',
address:'',
salary:'',
add_data:[]
}
inputs:
<div>
<label>username:</label>
<input type="text" noValidate name="uname" onChange={this.changeHandler} />
</div>
<div>
<label>password:</label>
<input type="password" noValidate name="pass" onChange={this.changeHandler} />
</div>
<div>
<label>address:</label>
<textarea noValidate name="address" onChange={this.changeHandler}></textarea>
</div>
<div>
<button onClick={this.submitForm}>Edit</button>
</div>
click and change functions:
changeHandler = e => {
var adddata_obj;
this.setState({ [e.target.name]: e.target.value })
}
submitForm = () => {
console.log(this.state);
this.setState({
add_data: [...this.state.add_data, { username: this.state.uname, password: this.state.pass, address: this.state.address }]
})
}
The problem is that when I click on edit button, the add_data array does not update. Instead, when I change something else on the textboxes, it shows the value od edt_data fro the last click. Please help.

Answer 1

Here is a complete working code example (test it here: https://codesandbox.io/embed/mq66o03r3j):
import React from "react";
import {render} from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
uname: "",
pass: "",
address: "",
salary: "",
add_data: []
};
}
changeHandler = e => {
this.setState({[e.target.name]: e.target.value});
};
submitForm = () => {
this.setState({
add_data: [
...this.state.add_data,
{
username: this.state.uname,
password: this.state.pass,
address: this.state.address
}
],
uname: "",
pass: "",
address: "",
salary: ""
});
};
render() {
return (
<div>
<div>
<label>username:</label>
<input
type="text"
name="uname"
onChange={this.changeHandler}
value={this.state.uname}
/>
</div>
<div>
<label>password:</label>
<input
type="password"
name="pass"
onChange={this.changeHandler}
value={this.state.pass}
/>
</div>
<div>
<label>address:</label>
<textarea
name="address"
onChange={this.changeHandler}
value={this.state.address}
/>
</div>
<div>
<button onClick={this.submitForm}>Edit</button>
</div>
<div>
<p>Saved data:</p>
<table>
<tr>
<td>User</td>
<td>Password</td>
<td>Address</td>
</tr>
{this.state.add_data.map(d => (
<tr>
<td>{d.username}</td>
<td>{d.password}</td>
<td>{d.address}</td>
</tr>
))}
</table>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
Now you can find your mistakes by yourself. Don't hesitate to ask me, when something is unclear.

Answer 2

Your code works fine #user3450590, see your snippet here just with the add_data being rendered out as a list https://stackblitz.com/edit/state-array-updating-on-next-click.
The only thing I changed was where you log the state. setSet is asynchronous ( see here), you can pass it a callback as a second argument if you need to log out the changes.
As per #virtusmaior's example you also leave the original values in the state which you may want to change when you submit your form.
Also as a nice little cherry on top your submit function would benefit from destructuring. ie
submitForm = () => {
console.log(this.state);
this.setState(state => {
const { add_data, ...values } = state;
return {
add_data: [...add_data, { ...values }]
};
});
}