# Dealing With State in React | kirupa.com
**URL:** https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207
**Category:** programming
**Created:** [March 20, 2017, 2:01am UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207 "2017-03-20T02:01:25Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 20, 2017, 2:01am UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/1 "2017-03-20T02:01:25Z")
Up until this point, the components we've created have been stateless. They have properties (aka props) that are passed in from their parent, but nothing changes about them once the components come alive. Your properties are considered immutable once they have been set. For many interactive scenarios, you don't want that. You want to be able to change aspects of your components as a result of some user interaction (or some data getting returned from a server or a billion other things!)
* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/react/dealing\_with\_state.htm](http://www.kirupa.com/react/dealing_with_state.htm)
---
### Author:  [@Rafic\_Jouejati](https://forum.kirupa.com/u/Rafic_Jouejati)
#### Post date: [November 22, 2017, 6:01pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/2 "2017-11-22T18:01:30Z")
Hi, thanks for the article.
It would be great if you can explain what are constructor(props, context) and super(props, context) and explain their purpose
Thanks
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 22, 2017, 8:42pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/3 "2017-11-22T20:42:27Z")
They are just part of the ES6 classes implementation: [https://www.kirupa.com/javascript/classy\_way\_to\_create\_objects.htm](https://www.kirupa.com/javascript/classy_way_to_create_objects.htm) The purpose of the constructor is to automatically execute any code as part of creating the object.
Every React component gets a few arguments passed in during creation. The **props** argument contains the things you receive via `this.props`. The **context** argument is something you’ll rarely need to use…except when using Redux and related libraries that help manage state.
---
### Author:  [@MadipallyNaveen](https://forum.kirupa.com/u/MadipallyNaveen)
#### Post date: [January 10, 2018, 5:30pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/4 "2018-01-10T17:30:28Z")
It is such a great explanation, Really Thanks Kirupa 🙂
---
### Author:  [@MadipallyNaveen](https://forum.kirupa.com/u/MadipallyNaveen)
#### Post date: [January 10, 2018, 5:36pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/5 "2018-01-10T17:36:38Z")
Can you please explain why we are calling
super(props, context);
after the constructor , According to me we are calling React.Component Constructor.
Can you please explain?
If i remove this , i am getting following error
‘this’ is not allowed before super()
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [January 11, 2018, 7:25pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/6 "2018-01-11T19:25:58Z")
The React.Component constructor may rely on functionality provided a base class that it is extending. That is why the super call is needed 🙂
---
### Author:  [@MadipallyNaveen](https://forum.kirupa.com/u/MadipallyNaveen)
#### Post date: [January 11, 2018, 11:44pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/7 "2018-01-11T23:44:31Z")
Thanks for the reply, Kirupa! 🙂
---
### Author:  [@Partha\_Roy](https://forum.kirupa.com/u/Partha_Roy)
#### Post date: [June 14, 2018, 8:45pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/8 "2018-06-14T20:45:47Z")
setInterval does not work in Firefiox!
```auto
class Card extends React.Component{
constructor(props, context) {
super(props, context);
this.state = {
color: parseInt(this.props.cardColor.substring(1),16)
};
this.timerTick = this.timerTick.bind(this);
}
timerTick() {
this.setState({
color: this.state.color + Math.floor(Math.random() * 1701)
});
}
componentDidMount() {
setInterval(this.timerTick, 1000);
}
render(){
var cardStyle = {
height : "250px",
width : "150px",
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px 0px 5px #666)",
filter: "drop-shadow(0px 0px 5px #666)"
};
return(
);
}
}
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 16, 2018, 3:15pm UTC](https://forum.kirupa.com/t/dealing-with-state-in-react-kirupa-com/636207/9 "2018-06-16T15:15:40Z")
Try replacing with window.setInterval? That function works in Firefox based on a simple test I conducted 🙂