How to Work with and Manipulate State in React

The following is an excerpt from React Quickly, a hands-on book by Azat Mardan for anyone who wants to learn React.js fast.

When accessing, working with, and manipulating state in React, it’s important to know what you’re doing (and why you’re doing it!). In this article, you will be learning about state in React and how to work with it. We will also talk about some of the differences between state and props, as well as how to work with “stateless” components. But before we dive into all that, in order to work with state, we need to know how to access the values, update them and how to set the initial values. Let’s get started with accessing state in React components.

The source code for the examples in this article can be found in the ch04 folder of the book’s GitHub repository.

Accessing States

The state object is an attribute of a component and can be accessed with this reference, e.g., this.state.name. We can access and print variables in JSX with curly braces {}. Similarly, we can render this.state (as any other variable or a custom component class attributes) inside of render(). For example, {this.state.inputFieldValue}. This syntax is like accessing properties with this.props.name.

Let’s go ahead and try to implement a clock (Figure 1). The goal is to have a self-contained component class anyone can import and use in their application without having to jump through hoops. The clock must render the current time.

The clock displaying the current time

Figure 1: Clock component shows current time in digital format—updated every second

The structure of the Clock project is as follows:

/clock
  - index.html
  /jsx
    - script.jsx
    - clock.jsx
  /js
    - script.js
    - clock.js
    - react-15.0.2.js
    - react-dom-15.0.2.js

I’m using Babel CLI with a watch -w and a directory flag -d to compile all source JSX files from clock/jsx to a destination folder clock/js and recompile on change. Moreover, I’ve saved the command as an npm script in my package.json file in a parent folder called ch04 in order to run npm run build-clock from ch04:

"scripts": {
    "build-clock": "./node_modules/.bin/babel clock/jsx -d clock/js -w"
},

Obviously, time is always changing (for good or for bad). Because of that, we’ll need to update the view using state. We name it currentTime and try to render this state as shown in Listing 1.

class Clock extends React.Component {
  render() {
    return <div>{this.state.currentTime}</div>
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('content')
)

Listing 1: Rendering state in JSX

If we run this, we’ll get the following error: Uncaught TypeError: Cannot read property 'currentTime' of null. Normally, JavaScript error messages are as helpful as a glass of cold water to a drowning man. It’s good that in this case JavaScript gives us a helpful error message. This one means we don’t have any value for currentTime. Unlike props, states aren’t set on a parent. We can’t setState in render() either, because it’ll create a circular (setState >render >setState…) loop and, in this case, React will throw an error.

Setting the Initial State

You’ve seen that before using a state data in render(), we must initialize it. To set the initial state, use this.state in the constructor with your ES6 class React.Component syntax. Don’t forget to invoke super() with properties, otherwise the logic in parent (React.Component) won’t work.

class MyFancyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {...}
  }
  render() {
    ...
  }
}

Developers can add other logic when setting the initial state. For example, we can set the value of currentTime using new Date(). We can even use toLocaleString() to get the proper date and time format in the user’s location:

Continue reading %How to Work with and Manipulate State in React%

You must be logged in to post a comment.

blog