Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error trying to use inputComponent

See original GitHub issue


I’m trying to use the property inputComponent with the Input component from material-ui ( but when I try to type something I get the error Uncaught TypeError: is not a function and I’m not sure what is the problem. The documentation of this property is a little bit simple and I couldn’t understand what else I would need to do.

          onChange={phone => this.handleOnChange(name, phone)}
          // inputComponent={<Input />}
          // inputComponent={props => <Input {...props} />}


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:32 (16 by maintainers)

github_iconTop GitHub Comments

TylerRickcommented, Sep 25, 2019

@NevenLiang, did you ever develop this further?

It looks like if you supply your own inputComponent, then your input component is responsible for formatting the phone number value, too. Did you happen to add that feature to yours?

I was hoping that using a custom inputComponent would only change which input was used (mostly to make the look consistent with the other inputs in the form) but everything else would work the same.

Automatic formatting of the phone number seems like something react-phone-number-input could/should do for you regardless of which inputComponent you happen to be using. I wish that functionality were exposed buried within InputBasic. (I wonder if that was necessary due to differences between InputBasic and InputSmart?)

NevenLiangcommented, Jul 15, 2019

But in the code onChange(, onChange is the props.onChange from <PhoneInput/>.

Is the description in document not very accurate?

Using the parameter passed to props.onChange from <PhoneInput/> must be a string, it may be more accurate.

I suggest that you add some example like this, to the github page of this project.

import React from 'react';
import TextField from 'material-ui/TextField';
import PhoneNumberInput from 'react-phone-number-input';

import 'react-phone-number-input/style.css';

  placeholder="Phone Number"


class PhoneNumberTextField extends React.Component {
  setRef = ref => {
    this.input = ref;

  focus = () => {

  render() {
    // just extract `country` and `metadata` out of `props`,
    // not passing to the input component
    const {country, metadata, onChange, } = this.props;

    return (
        id="phoneNumber"  // not necessary
        floatingLabelText="Phone Number"  // not necessary
        // `props.onChange` only accept string
        onChange={event => onChange(}  
Read more comments on GitHub >

github_iconTop Results From Across the Web

I am having errors while using input component in my next.js ...
I am using stripe payment in my next.js project. I am having a material ui textfield like this import StripeInput from '.
Read more >
tJMS input component connection error. - Talend Community
Hi,. I m trying to use tjms input component and gave all the requried component settings.. But M still getting this error.
Read more >
Input Components - React-admin - Marmelab
Which Input Component to Use? ... may “jump” visually when the input contains an error, as the error message will appear below the...
Read more >
React Text Field component - Material UI - MUI
The error prop toggles the error state. The helperText prop can then be ... The select prop makes the text field use the...
Read more >
How to create reusable form components with React Hook ...
You might want to reuse the same validation logic and error styling ... We also want to replace the <Input> component we were...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found