optimizing-state-change-in-react

optimizing-state-change-in-react-1.jsx

import React from 'react';

export class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: ''
    };
  }

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    // handle and submit form data to server
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <fieldset>
          <div>
            <label htmlFor='formName'>Name:</label>
            <input
              id='formName'
              name='name'
              type='text'
              value={this.state.name}
              onChange={this.handleChange}
            />
          </div>
          <div>
            <label htmlFor='formEmail'>Email:</label>
            <input
              id='formEmail'
              name='email'
              type='text'
              value={this.state.email}
              onChange={this.handleChange}
            />
          </div>
        </fieldset>
        <button type='submit'>Submit</button>
      </form>
    );
  }
}

optimizing-state-change-in-react-2.js

/**
 * Set the state for a key value pair from an event.
 *
 * @param {object} event The event object.
 * @returns {void}
 */

handleChange = event => {
  this.setState({ [event.target.name]: event.target.value });
};

optimizing-state-change-in-react-3.js

handleTextChange = event => {
  this.setState({ [event.target.name]: event.target.type });
};

handleCheckboxChange = event => {
  this.setState({ [event.target.name]: event.target.checked });
};

handleRadioChange = event => {
  this.setState({ [event.target.name]: event.target.checked });
};

optimizing-state-change-in-react-4.js

handleChange = event => {
  let value =
    e.target.type === 'checkbox' || e.target.type === 'radio'
      ? e.target.checked
      : e.target.value;
  this.setState({ [event.target.name]: value });
};

optimizing-state-change-in-react-5.js

// <input type="file" onChange={this.handleChange} />

handleChange = event => {
  if (event.target.type === 'file') {
    let file = event.target.files[0];
    // Manipulate file for server upload.
    // Call another function from this point if needed.
  } else {
    let value =
      e.target.type === 'checkbox' || e.target.type === 'radio'
        ? e.target.checked
        : e.target.value;
    this.setState({ [event.target.name]: value });
  }
};

optimizing-state-change-in-react-6.js

/*
 * Maybe our form object is an object within state.
 * <input type="text" onChange={(event) => this.handleChange(event, 'formObj') } />
 *
 * Note: We are not accounting for instances when key or state.key may be undefined.
 */

handleChange = (event, key) => {
  // Multilevel
  let state = this.state;
  state[key][name] = event.target.value;
  this.setState(state);
}

optimizing-state-change-in-react-7.js

// Create a handleChange function to receive event and possible options from an input function.
const handleChange = (event, key, callback) => {
  let obj = {};
  // Setup a name from the event.
  // Default to value so you can debug a naming error when looking at state :)
  let name = event.target.name ? event.target.name : event.target.value;
  let value =
    e.target.type === 'checkbox' || e.target.type === 'radio'
      ? e.target.checked
      : e.target.value;

  if (event.target.type === 'file') {
    value = event.target.files[0];
  }

  if (key) {
    obj[key][name] = value;
  } else {
    obj[name] = value;
  }

  if (callback && typeof callback === 'function') {
    callback(obj);
  } else {
    return obj;
  }
};

/*
 * Use Case #1
 * let state = handleChange(event, 'child');
 * this.setState(state);
 *
 * Use Case #2
 * handleChange(event, null, () => {// do something});
 *
 * Have an optimization for this function? Let me know!
 */