Mirror JSON Object Changes in the DOM in jQuery

In React, you don't need to worry about DOM changes because React does the heavy-duty optimization for you. This guide covers how to mirror changes to a JSON object in the DOM.

Oct 14, 2020 • 4 Minute Read

Subscribe to the newsletter

Introduction

Creating user interfaces for web apps in React is a breeze. React gives developers flexibility and promotes reusability for maximum reuse of common UI elements such as buttons, text inputs, navigation, and so on. When it comes to development in React, you need not worry about how DOM changes happen as React does all the heavy-duty optimization for you.

State in React is used to keep track of how data changes over time in an app, and props are data that can be passed between different components. In this guide, you will learn how to mirror changes to a JSON object in the DOM.

Storing JSON in State

For the purposes of this guide, create a basic component with a user's info in state, as shown below. The user state is a JSON object that has name, age, and salary as properties.

      state = {
  user: {
    name: "John Doe",
    age: 21,
    salary: 2000,
  },
};
    

In the render method, display the JSON object using the JSON.stringify() method. Below that, add three inputs, which will change the values of name, age, and salary respectively.

      <div className="app">
  <pre>{JSON.stringify(user, null, 2)}</pre>
  <div>
    <input
      onChange={this.handleChange}
      name="name"
      placeholder="Name"
      value={user.name}
    />
    <input
      onChange={this.handleChange}
      name="age"
      placeholder="Age"
      value={user.age}
    />

    <input
      onChange={this.handleChange}
      name="salary"
      placeholder="Salary"
      value={user.salary}
    />
  </div>
</div>
    

Now, write a handleChange method that will change the user state value based on the value from the inputs. Make sure that the name of the inputs match the property names in the user state.

      handleChange(e) {
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value,
      },
    });
  }
    

Putting all the above snippets together, your final component should look as follows.

      import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        name: "John Doe",
        age: 21,
        salary: 2000,
      },
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({
      user: {
        ...this.state.user,
        [e.target.name]: e.target.value,
      },
    });
  }

  render() {
    const { user } = this.state;
    return (
      <div className="app">
        <pre>{JSON.stringify(user, null, 2)}</pre>
        <div>
          <input
            onChange={this.handleChange}
            name="name"
            placeholder="Name"
            value={user.name}
          />
          <input
            onChange={this.handleChange}
            name="age"
            placeholder="Age"
            value={user.age}
          />

          <input
            onChange={this.handleChange}
            name="salary"
            placeholder="Salary"
            value={user.salary}
          />
        </div>
      </div>
    );
  }
}
    

If you check out the results, you will notice that as you change the value in the textbox, the user JSON object also changes instantly.

In React, data is bound to an input using the value prop of an input element, which makes the input controlled. A controlled input takes the value from the state and triggers an onChange event when the value in the input changes. The component entirely controls the value of the inputs, and the inputs do not have direct access to the component's state. Hence, it is called one-way data binding.

Conclusion

If you are beginning with React, you must understand how one-way data binding works in React. It's ideal if you understand various strategies of passing data between components using props or context. Controlled components keep your UI in sync with the component state, making it predictable and easy to debug.

So that's it from this guide. To learn more about data binding in React, check out this article.