Quick Recap

all about state and props

State is a JavaScript object that stores a component’s dynamic data and determines the component’s behavior. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

State can only be used within a class component. If you anticipate that a component will need to manage state, it should be created as a class component and not a functional one.

State is similar to props but unlike props, it is private to a component and is controlled solely by the said component. In the examples from previous chapters, the behavior of components has primarily depended on the propsthat are passed down to them. In those cases, the components that receive the props have no control over them because props are read-only.

It is worth mentioning that state in React is immutable, that is to say, state should never be altered/changed directly but rather, changes should be made to a copy of the current version of the state. This has benefits such as providing the ability to review the state at different points in time and for apps to hot reload (automatic reloading of the page in the browser when you make changes in the code).

Adding State to a Class Component

class Greeting extends React.Component {
  render(){
    return <h1>I’m a component in need of some state!</h1>;
  }
}

Adding state to the Greeting component above involves defining within the class component, a constructor function that assigns the initial state using this.state.

class Greeting extends React.Component {
constructor(props) {
   super(props);
     // Define your state object here
     this.state = {
       name: ‘Jane Doe’
     }
   }
   render(){
     return <h1>Hello { this.state.name }</h1>;
   }
}

Notice that the constructor accepts props as an argument, which are then passed to super(). Adding super() is a must when using the constructor.

Passing props is not necessary unless you are making use of them in the component. From the Greeting component above, it’s not necessary to pass props to either the constructor or super(), that is to say, the component can be written like so:

class Greeting extends React.Component {
  constructor() {
    super();
    // Define your state object here
  }
  // Define your render method here
}

However, the React docs recommend that you always pass props in order to guarantee compatibility with potential future features

State is accessed using this.state as seen in the Greeting component’s h1 tag.

State is initiated using this.state, however, all subsequent changes to state are made using this.setState. Using this.setState ensures that the components affected by the change in state are re-rendered in the browser.

Investigating State using React Developer tools

One way to accelerate your understanding of React is to make use of the React dev tools created by the team at Facebook. The power of React dev tools is most apparent when you need to debug your React app by doing a deep dive into the code. The tools enable you to investigate how React is working below the surface when the app is rendered in the browser.

Installing the React Developer tools

The dev tools are available for download on both Mozilla Firefox Add-ons and the Chrome Web Store. Follow the appropriate link to install the dev tools depending on which browser you have installed on your computer.

Throughout the rest of this book, Chrome will be used as the browser of choice. In order to confirm successful installation of the dev tools on Chrome, open the developer tools window using Cmd+Opt+I on a Mac or Ctrl+Alt+Ion a windows PC. You should now see a React tab.

Using the React Dev tools

With the Greeting component from earlier in this chapter rendered in your browser, open the developer tools and navigate to the React tab. You should see something similar to this

Mastery of the React DevTools will enable you to gain a better understanding of React’s inner workings and to quickly debug React applications.

Let’s start by defining Component’s props (obviously short for properties) in React. Props are used to customize Component when it’s being created and give it different parameters.

import React, {Component} from 'react'
class Topic extends Component {
   render{
     return(
      <div>
        {this.props.name}
      </div>
    )
   }
}

One of the most important features of props is that they can be passed by a parent component to its child components. This allows us to create a component that can be customized with a new set of props every time we use it.

import React, {Component} from 'react'
class Welcome extends Component {
   render{
     return(
      <div>
        <p> Welcome to React, today you will learn: </p>
        <Topic name="Props"/>
        <Topic name="State"/>
      </div>
    )
   }
}

Props are passed to the component and are fixed throughout its lifecycle. But there are cases when we want to use data that we know is going to change overtime. In this case we use something called state.