title: Input masking with React
body: <p>How to do input masking with react:</p>
  
  <p>This is what I have so far. I can't seem to get the value to update correctly, I also want the cursor to be at the beginning when they click in the input. I am kind of stuck from here.</p>
  
  <p>Expected output from input : something like <code>0_ / _ _</code> => <code>0 9 / 0 _</code> => <code>0 9 / 0 9</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        inputValue: ''
      };
  
      this.update = this.update.bind(this);
    }
    update(e) {
      e.preventDefault();
      const formatString = '_ _ / _ _';
      const newString = `${e.target.value}${formatString.slice(
        e.target.value.length
      )}}`;
      this.setState({ [e.target.name]: newString });
    }
    render() {
      return (
        &lt;div&gt;
          &lt;input
            type="text"
            onChange={this.update}
            name="inputValue"
            value={this.state.inputValue}
            onFocus={() =&gt; this.setState({ inputValue: '_ _ / _ _' })}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>