State And Props

Video Tutorial

If you're someone who learn better by watching videos, this video tutorial is awesome.

React State and Props | Learn React For Beginners Part 4YouTube

State and Props

State

State is simply what we use to handle app values that can change over time.

For example, consider a very simple application that has a button and a counter. When the user clicks the button, the counter is incremented by 1. Since count will need to change on every click, we want to hold that value in state.

import React, { Component } from 'react';

class App extends Component {
  state = {
      count: 0,
  }

  countUp = () => {
    this.setState({
      count: this.state.count + 1,
    });
  }
  
  resetCount = () => {
    this.setState({
      count: 0
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.countUp}>Increase Count</button>
        <button onClick={this.resetCount}>Reset Count</button>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

export default App;

In the above component, we declared our state as an object with a property count set to an initial value of 0. When we click the button Increase Count a click event fires and calls the function countUp. This function calls the method setState which sets the state to a new value (increment count by 1).

When we click the button Reset Count a click event fires and calls the function resetCount. This function calls the method setState which sets the state to a new value (reset it to 0)

IMPORTANT: In React, state should be treated as immutable. This means you should never change state directly (i.e. without using setState) because it can lead to unexpected behavior or bugs.

In other words, you should never do something like: this.state.count = 3, or, this.state.count++. Instead, always use the setState method React provides to class components to modify the state.

It is important to know that a change in state triggers its component update (re-render).

In the render method, we access the current state through this.state.count. This syntax should look familiar to you by now because it is the same way we accessed props. And yes, you can also destructure state.

The same above component with destructuring:

import React, { Component } from 'react';

class App extends Component {
  state = {
      count: 0,
  }

  countUp = () => {
    this.setState({
      count: this.state.count + 1,
    });
  }

  resetCount = () => {
    this.setState({
      count: 0
    });
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <button onClick={this.countUp}>Increase Count</button>
        <button onClick={this.resetCount}>Reset Count</button>
        <p>{count}</p>
      </div>
    );
  }
}

export default App;

As you see changes in state fires changes in the user interface of the same component. But how can we use it to make changes in the child components? Let's see how.

Passing State to Props

One of the greatest and most powerful features of React is the ability to pass one parent component’s state down to multiple children. We can do that by passing the state of the parent to the children as props.

Consider the previous example of the counter. What if the counter was a separate component? Let's see how we can reflect the value of the state located in the App component to the Counter component.

import React, { Component } from 'react';
import Counter from './components/Counter';

class App extends Component {
  state = {
      count: 0,
  }

  countUp = () => {
    this.setState({
      count: this.state.count + 1,
    });
  }

  resetCount = () => {
    this.setState({
      count: 0
    });
  }

  render() {
    const { count } = this.state;
    return (
      <div>
        <button onClick={this.countUp}>Increase Count</button>
        <button onClick={this.resetCount}>Reset Count</button>
        <Counter count={count} />
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

class Counter extends Component {
    render() {
        const {count} = this.props;
        return (
            <div>{count}</div>
        )
    }
}

export default Counter;

We passed the value of the state from App component to Counter component via count prop.

Props

In the previous day, you learned a lot about components and how to structure your application in a “React way”. But how do we share values or even functionality between those components? Yes, you guessed it right, the answer is props. Props are one of the two major pillars of React (the second one is state).

Prop is a shortcut for property which means it is a key: value pair.

Let’s take the following example:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div>
        <MyComponent title="Welcome to React!" />
      </div>
    );
  }
}

export default App;

Let’s take a look at what is happening here. Above, there are two components, MyComponent and App. As you can see, MyComponent is imported into App, and then rendered as a child component of App.

In the JSX where we implement MyComponent, we also pass down a property called title. This syntax should look familiar to you: it’s the same way we assign attributes to HTML elements. In this specific example, we assign a “prop” (short for property, as in an object property) called title which we set to the value Welcome to React".

In MyComponent, we can access this “prop” from within MyComponent with the syntax this.props.title. This technique is called “passing props.”

Now, you might be wondering how props work with functions. Believe it or not, they work the same way!

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <button onClick={this.props.onButtonClicked}>Click Me!</button>
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {

  handleClick = () => {
    console.log('Button has been clicked!');
  }

  render() {
    return (
      <div>
        <MyComponent title="Welcome to React" onButtonClicked={this.handleClick} />
      </div>
    );
  }
}

export default App;

Ok, there is a little bit more going on here, but in the end, it works exactly as in the example before. First, there is MyComponent, which is essentially the same except one key difference: {this.props.onButtonClicked} is assigned to the onClick event of the component. Essentially, what this means is:

• Our MyComponent component is expecting a prop to be passed into it named onButtonClicked

• The value of that prop should be some kind of function

• We want this function to be attached to the click event of our button.