Daniel Strunk

Web Developer

Easier Data Binding in React

Originally written on Saturday, February 02, 2019.

Using ES2015, it's possible to initialize objects using computed property names. This is handy for dynamically setting the state in React, for example:


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

class App extends Component {
  constructor() {
    super()
    this.state = {
      username: ''
    }

    this.handleChange = this.handleChange.bind(this) // Don't forget this!
  }

  // ...

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  // ...

  render() {
    return (
      <>
        // ...
        <input type="text"
          name="username"
          placeholder="username"
          onChange={this.handleChange}
          value={this.state.username} />
        // ...
      </>
    )
  }
}
        

Note the handleChange() method. This method uses a computed property name, [e.target.name], to set the value. This means you can reuse the method to bind multiple elements to state changes with minimal effort.

To add another element, you'd do the following. First, in the constructor():


this.state = {
  // ...
  email: ''
}
        

And in the render() function:


<input type="text"
  name="email"
  placeholder="user@example.com"
  onChange={this.handleChange}
  value={this.state.email} />
        

Written by Daniel Strunk.

Hi! I'm Daniel Strunk, a PHP developer proficient in Laravel, Craft CMS and Magento development. I'm an advocate for test-driven development, a typography nerd, and a fan of building applications to help keep my life in order.