Hamza Sami Ullah
Hamza Sami Ullah

Reputation: 1

Got Error: Uncaught TypeError: handleChange is not a function

I want to use the handle function within the input tag. But it's showing an error when I call this function on the main page.

main code:

const Input = ({ placeholder, name, type, value, handleChange }) => (
    <input
        placeholder={placeholder}
        type={type}
        step="0.0001"
        value={value}
        onChange={(e) => handleChange(e, name)}
        className="my-2 w-full rounded-sm p-2 outline-none bg-transparent text-white 
        border-none text-sm white-glassmorphism"
    />
);

Where the handle Change is declared:

const handleChange = (e, name) => {
    setformData((prevState) => ({ ...prevState, [name]: e.target.value }));
};

Upvotes: 0

Views: 1523

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

You can use in this way

const MyTextInput = ({ value, name, type, onChange }) => {
  return (
    <TextInput
      value={value}
      onChangeText={text => onChange({ name, type, text })}
    />
  );
};

And then use it whenever you need to use TextInput

handleChange(event) {
    const {name, type, text} = event;
    .....
}

<MyTextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}>
<MyTextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>

Upvotes: 1

Related Questions