How to use event handler properly

Hi, I’m sure this is a problem with my understanding, but I can’t figure out how to properly handle a change to the NumberFormat component (basically how to use my handler). I’m completely new to Reactjs, please play nicely with me 😃

The below works fine with an component: ` return ( <fieldset> <legend> Enter Phone Number </legend> <ValueField number={this.props.number} /> </fieldset> );

` But I can’t figure out how to do the same with the <NumberFormat> component:

return ( <fieldset> <legend> Enter Phone Number </legend> <NumberFormat isNumericString={true} format="(###) ###-####" mask=" " value={this.props.number} onValueChange={(values, e) => { const {formattedValue, value} = values; {handleChange(value)} } } /> <ValueField number={this.props.number} /> </fieldset> );

[racingrebel]

You were using this function: onValueChange={(values, e) => this.handleChange(values, e)} To call this function: handleChange(e) { this.props.onNumberChange(e.target.value); }

As you can see the arguments do not line up. You are giving handleChange 2 arguments. As written, you are only using the first one ‘values’, but you are trying to read it as ‘e’ and event.

Here is a working version:

class PhoneInputForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleNumberChange = this.handleNumberChange.bind(this);
    this.state = {
      number: '222'
    }
  }
  handleNumberChange(number) {
    this.setState({number: number}); 
  }
  render() {
    
    return (
    <div> 
      <h1>
        My Phone App
      </h1>
      <h2>
        <InputBox 
          number={this.state.number}
          onNumberChange = {this.handleNumberChange} />
        <ValueField number={this.state.number}/>
      </h2>
    </div>
    );
  }
}
class InputBox extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(value) {
    this.props.onNumberChange(value);
  }
  render() {
    
    const number=this.props.number;
    
    if(number.length > 10) {
      return (
        <fieldset>
          <legend> Enter Phone Number </legend>
          <input
            value={this.props.number}
            onChange={this.handleChange}
            />
          <ValueField number={this.props.number} />
        </fieldset>
      );
    } else {
      return (
      <fieldset>
        <legend> Enter Phone Number </legend>
        <NumberFormat
          isNumericString={true}
          format="(###) ###-####"
          mask=" "
          value={this.props.number}
          onValueChange={values => this.handleChange(values.value)}
          />
        <ValueField number={this.props.number} />
      </fieldset>
    );
    }
  }
}
function ValueField(props) {
  
  if(isNaN(props.number) || props.number == '') {
    return <p> </p>;
  }
  
  return <p> +1{props.number} </p>;
  
}
ReactDOM.render(
  <PhoneInputForm />,
  document.getElementById('root')
);

[NoahLerner]

Thanks for your help. I managed the custom format function. Here’s the final product if you’re interested.

https://gist.github.com/thewholuver94/ef43d718bf4e83104d08b46676d35756