React.js state

last modified July 13, 2020

React.js state tutorial shows how to work with state in React.js

React.js

React.js is a declarative, component-based JavaScript library for building user interfaces. React.js allows to build encapsulated components that manage their own state. These components can be used to create complex UIs.

React.js state

The state is built-in object in React components. In the state object we store property values that belong to the component. When the state object changes, the component re-renders. The state object is modified with the setState() function.

The props serves a similar purpose to state. Both are plain JavaScript objects. The difference between them is that props gets passed to the component whereas state is managed within the component.

The developer should always try to make the state minimal. Also, the number of stateful components should be minimized.

React.js state example

$ npx create-react-app stateex

We create a new React application with the npx create-react-app command.

$ cd stateex

We go to the newly created directory.

App.js

import React from 'react';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      title: "React state example",
    };
  }

  tooggleTitle = () => {

    if (this.state.title === '') {

      this.setState({ title: 'React state example' });
    } else {

      this.setState({ title: '' });
    }
  }

  render() {
    return (
      <div>

        <div>
          <input type="checkbox" id="showTitle" onClick={this.tooggleTitle} defaultChecked />
          <label htmlFor="showTitle">Show title</label>
        </div>

        <h2>{this.state.title}</h2>

      </div>
    );
  }
}

export default App;

In the example, we have a title property in the state object. We use a checkbox to toggle the visibility of the title.

constructor() {
  super();

  this.state = {
    title: "React state example",
  };
}

In the constructor, we set a default value for the title property.

tooggleTitle = () => {

  if (this.state.title === '') {

    this.setState({ title: 'React state example' });
  } else {

    this.setState({ title: '' });
  }
}

The tooggleTitle() function toggles the contents of the title property. The property is updated with the setState() function.

<div>
  <input type="checkbox" id="showTitle" onClick={this.tooggleTitle} defaultChecked />
  <label htmlFor="showTitle">Show title</label>
</div>

We have a checkbox. On the click event the tooggleTitle() is called.

<h2>{this.state.title}</h2>

The <h2> tag displays the title.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

In the index.js file, we import the App component and render it into the root element.

public/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

This is the home page of the application. The component is rendered into the container with the root id.

$ npm start

We start the development server and navigate to the localhost:3000 to see the output.

In this tutorial, we have worked with the state object of a React component.

List all React.js tutorials.

Ebooks

React.js state

React.js

React.js state

React.js state example