React. js - Передача функции через компонент - «handleChange не является функцией»

Question

Я не знаю, что делать. В других приложениях я запрограммировал это работало, но на этот раз я не знаю, что не так. Я пытаюсь передать функцию через компонент, и он сообщает мне, что эта функция не является функцией.

Пользовательская форма: я хочу создать пользовательскую форму с шагами. Я создал handleChange и пытаюсь передать его компоненту FormUserDetails.

import React, { Component } from "react";

// Components
import FormUserDetails from "./FormPersonalDetails";

export class UserForm extends Component {
  state = {
    step: 1,
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // Handle fields change
  handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    const { step } = this.state;
    const { firstName, lastName, email, occupation, city, bio } = this.state;
    const values = { firstName, lastName, email, occupation, city, bio };

    switch (step) {
      case 1:
        return <FormUserDetails nextStep={this.nextStep} handleChange={this.handleChange} values={values} />;
      case 2:
        return <h1>FormPersonalDetails</h1>;
      case 3:
        return <h1>Confirm</h1>;
      case 4:
        return <h1>Success</h1>;
      default:
        return console.log("This is a multi-step form built with React.");
    }
  }
}

export default UserForm;

Компонент: внутри компонента я не пытаюсь получить его через реквизиты, но получаю неопределенное значение пропса из журнала консоли и сообщение «TypeError: handleChange не является функцией». Я должен быть слепым, чтобы не видеть, что случилось.

import React, { Component } from "react";

// Styles
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import AppBar from "material-ui/AppBar";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

export class FormUserDetails extends Component {
  continue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    console.log(handleChange, "Handle Change");
    return (
      <MuiThemeProvider>
        <React.Fragment>
          <AppBar title="Enter User Details" />
          <br />
          <TextField placeholder="Enter Your First Name" label="First Name" onChange={handleChange("firstName")} defaultValue={values.firstName} />
          <br />
          <TextField hintText="Enter Your Last Name" floatingLabelText="Last Name" onChange={handleChange("lastName")} defaultValue={values.lastName} />
          <br />
          <TextField hintText="Enter Your Email" floatingLabelText="Email" onChange={handleChange("email")} defaultValue={values.email} />
          <br />
          <RaisedButton label="Continue" primary={true} style={styles.button} onClick={this.continue} />
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const styles = {
  button: {
    margin: 15,
  },
};

export default FormUserDetails;

Спасибо за помощь.