> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/day-03/quick-recap.md).

# 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`, i**t 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 `props`that 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 <a href="#id-47e9" id="id-47e9"></a>

```
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 `h`1 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 <a href="#id-1b5f" id="id-1b5f"></a>

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](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) and the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). 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+I`on 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

![](https://cdn-images-1.medium.com/max/1600/0*fULzoEN9AtH3lXSk.)

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**.