Dealing With State in React | kirupa.com

programming
1

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
2

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

3

They are just part of the ES6 classes implementation: 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.

4

It is such a great explanation, Really Thanks Kirupa :slight_smile:

5

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()

6

The React.Component constructor may rely on functionality provided a base class that it is extending. That is why the super call is needed :slight_smile:

7

Thanks for the reply, Kirupa! :slight_smile:

8

setInterval does not work in Firefiox!

        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(
                    <div style={cardStyle}>
                        <Square cardColor = {'#' + this.state.color.toString(16)}></Square>
                        <ColorLabel cardColor = {'#' + this.state.color.toString(16)}></ColorLabel>
                    </div>
                );
                
            }
        }
9

Try replacing with window.setInterval? That function works in Firefox based on a simple test I conducted :slight_smile: