React Phone Number input format and Output without format

Question

I am attempting to create a phone number format in the input and no phone number format on the output below it. I also want to add a condition that if user types more than 10 entries there will be no more phone format in the input.

Also, please let me know if there is any way to do this without the react-number-format library.

App.js

import React, { Component } from 'react';
import NumberFormat from 'react-number-format';

class App extends Component {
  state ={
  userInput: ''
}


  inputChangedHandler = (event) => { 
   this.setState({userInput: event.target.value});
   }
  render() {
    return (
      <div className="App">
        <input type="number"
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        <NumberFormat 
        format="(###) ###-####" mask=""
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        </div>
    );
  }
}

export default App;

Answer 1

From react-number-format documentation you can make use of the onValueChange function which returns a values object.

  inputChangedHandler = (values) => {
    this.setState({
      userInput: values,
    });
  }

Then we use this.state.userInput.value to get the unformatted value.

<NumberFormat
  format="(###) ###-####"
  mask=""
  name="phoneNumberInput"
  placeholder="Phone Number Here"
  onValueChange={this.inputChangedHandler}
  value={this.state.userInput.value}
/>
<p><strong>Value: </strong>+1{this.state.userInput.value}</p>