replace array object at perticular index in setState - reactjs

Question

I have an update button which gets me the updated object and I have the index at which I want to replace the array with this object:
updateVal = () => {
console.log("this.state::", this.state);
let alleditvals = {
username: this.state.uname_edit,
password: this.state.pass_edit,
address: this.state.address_edit
};
console.log("w::", this.state.add_data[this.state.count_edit]);
console.log("alleditvals::", alleditvals);
console.log("this.state.add_data[1]", this.state.add_data[1]);
this.state.add_data.map((a, i) => {
console.log("i::", i);
console.log("a::", a);
if (this.state.count_edit == i) {
console.log(this.state.add_data[i]);
}
});
}
the state is like this:
this.state = {
uname: "",
pass: "",
address: "",
salary: "",
add_data: [],
edit_obj: {},
edit_showui: false,
uname_edit: "",
pass_edit: "",
address_edit: "",
count_edit: null,
changed_after_edit: {},
errorfields: {
uname_err: "",
pass_err: "",
address_err: "",
salary_err: "",
valid_user: false,
valid_pass: false,
valid_address: false,
valid_salary: false
}
};
so my array is add_data which i want to replace with alleditvals at index this.state.count_edit. I have also checked on map function that if the index of current count matched the add_data index, please replace it, but don't know how to replace it.
if(this.state.count_edit == i){
console.log(this.state.add_data[i])
}

Answer 1

You can update your component state with the setState method, and use the array method map on your add_data array and replace the element at index count_edit with the alleditvals object.
updateVal = () => {
let alleditvals = {
username: this.state.uname_edit,
password: this.state.pass_edit,
address: this.state.address_edit
};
this.setState(({ count_edit, add_data }) => ({
add_data: add_data.map((item, index) =>
index === count_edit ? alleditvals : item
)
}));
}

Answer 2

Thanks to setState, you can update state easily.
class App extends Component {
constructor(props){
super(props)
this.state = {
allData: [],
index: 0
}
}
componentWillMount()
{
this.state.allData.push({ name1: "Test1", name2: "Test2"});
}
push1 = () =>
{
this.setState({
index: 1
})
}
push2 = () =>
{
this.setState({
index: 2
})
}
render() {
const list = this.state.allData.map((value, index) => {
return (
<div>
{ this.state.index === 1? value.name1 : value.name2 }
</div>
)
})
return (
<div>
<button onClick={this.push1}>Push 1</button><br/><br/>
<button onClick={this.push2}>Push 2</button><br/><br/>
<div>
{list}
</div>
</div>
);
}
}
In this example I pressed Push2 = Test2 shows. If you press Push1, Test1 will appear.