# Way to update the state in React

**URL:** <https://forum.codewithmosh.com/t/way-to-update-the-state-in-react/1567>\
**Category:** React\
**Created:** [December 31, 2020, 4:30am UTC](https://forum.codewithmosh.com/t/way-to-update-the-state-in-react/1567 "2020-12-31T04:30:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gag501](https://avatars.discourse-cdn.com/v4/letter/g/71e660/32.png) [@gag501](https://forum.codewithmosh.com/u/gag501)\
**Post date:** [December 31, 2020, 4:30am UTC](https://forum.codewithmosh.com/t/way-to-update-the-state-in-react/1567/1 "2020-12-31T04:30:14Z")

</div>

Hi. I’m new to this forum. I need help and get anyone’s idea if my code in the handleIncrement() is a valid way to update the state. I’m taking Mosh’s React course and I am following his coding. I just want to get some confirmation if the following code is a valid way to update the state of a component:

//parent component  
class Counters extends Component {  
state = {  
counters: [  
{ id: 1, value: 4 },  
{ id: 2, value: 3 },  
{ id: 3, value: 2 },  
{ id: 4, value: 0 },  
],  
};

handleDelete = (counterId) =\> {  
[//console.log](https://console.log)(“Delete event called”);  
const counters = this.state.counters.filter(© =\> c.id !== counterId);  
this.setState({ counters });  
};

handleReset = () =\> {  
const counters = this.state.counters.map(© =\> {  
c.value = 0;  
return c;  
});  
this.setState({ counters });  
};

//this handleIncrement function is called inside the onClick method of a controlled component //called see below code

handleIncrement = (counter) =\> {  
console.log(counter);  
const value = counter.value++;  
this.setState({ value });  
};

render() {  
return (

  
  
Reset  
  
{this.state.counters.map((counter) =\> (  
  
))}  

  
);  
}  
}

export default Counters

//Controlled Component which utilizes the handleIncrement()  
class Counter extends Component {  
render() {  
return (

  
{this.formatCount()}  
\<button  
onClick={() =\> this.props.onIncrement(this.props.counter)}  
className="btn btn-secondary btn-sm "  
\>  
Increment  
  
\<button  
onClick={() =\> {  
this.props.onDelete(this.props.counter.id);  
}}  
className=“btn btn-danger btn-sm m-2”  
\>  
Delete  
  

  
);  
}

getBadgeClasses() {  
let classes = “badge m-2 badge-”;  
classes += this.props.counter.value === 0 ? “warning” : “primary”;  
return classes;  
}

formatCount() {  
const { value } = this.props.counter;  
return value === 0 ? “Zero” : value;  
}  
}

export default Counter;

---

<div class="post-metadata">

**Author:** ![Augustine\_Awuori](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/augustine_awuori/32/873_2.png) [@Augustine\_Awuori](https://forum.codewithmosh.com/u/Augustine_Awuori)\
**Post date:** [February 6, 2021, 5:20pm UTC](https://forum.codewithmosh.com/t/way-to-update-the-state-in-react/1567/2 "2021-02-06T17:20:56Z")

</div>

It’s wrong. I think you’re changing the state directly