『Search for the keywords to learn more about each error. 』を改善したい

ReactでMaterial-UIを使用して、Webフォームを作成します。
下記のエラーの表示を改善したいです。
どうやって実装すればいいのかわからず困っています。どなたかアドバイスをお願いします。

Search for the keywords to learn more about each error.　
src/components/Content.js
  Line 38:35:  'handleNext' is not defined  no-undef
  Line 40:43:  'handleNext' is not defined  no-undef
  Line 40:67:  'handleBack' is not defined  no-undef
  Line 42:38:  'handleNext' is not defined  no-undef
  Line 42:62:  'handleBack' is not defined  no-undef
  Line 44:37:  'handleBack' is not defined  no-undef
  Line 53:30:  'activeStep' is not defined  no-undef
  Line 54:12:  'steps' is not defined       no-undef
  Line 61:27:  'activeStep' is not defined  no-undef
  Line 61:39:  'handleNext' is not defined  no-undef
  Line 61:51:  'handleBack' is not defined  no-undef

App.js

import { Grid } from "@mui/material";
import Header from "./components/Header";
import Content from "./components/Content";

function App() {
  return (
    <Grid container direction="column">
      <Header />
      <div style={{ padding: 30 }}>
        <Content />
      </div>
    </Grid>
  );
}
export default App;

src/components/Content.js

import React from "react";
import { Grid } from "@mui/material";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Basic from "./Basic";
import Questionnaire from "./Questionnaire";
import Optional from "./Optional";
import Confirm from "./Confirm";

export const UserInputData = React.createContext();

function Content() {
  const [currentState, setCurrentState] = React.useState({});
  const value = {
    currentState,
    setCurrentState,
  };
  function getSteps() {
    return ["お客様の情報を入力してください", "以下にお答えください", "ご相談ください", "以下の内容をご確認ください"];
  }

  function getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return <Basic handleNext={handleNext} />;
      case 1:
        return <Questionnaire handleNext={handleNext} handleBack={handleBack} />;
      case 2:
        return <Optional handleNext={handleNext} handleBack={handleBack} />;
      case 3:
        return <Confirm handleBack={handleBack} />;
      default:
        return "Unknown stepIndex";
    }
  }
  return (
    <Grid container>
      <Grid sm={2} />
      <Grid lg={8} sm={8} spacing={10}>
        <Stepper activeStep={activeStep} alternativeLabel>
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>
        <UserInputData.Provider value={value}>
          {getStepContent(activeStep, handleNext, handleBack)}
        </UserInputData.Provider>
      </Grid>
    </Grid>
  );
}

export default Content;

FKM

2021/10/29 09:33

クラスコンポーネントで書いてるなら関数コンポーネントに書き直せばいいのではないでしょうか。逆は無理が生じてくることが多いですが、Reduxでも使っていない限り、クラスコンポーネントから関数コンポーネントへの書き換えはそこまで難しいものではないですよ。

edu

2021/10/29 09:56

FKMさん、アドバイスありがとうございます！おしゃる事は正論だと思います。過去、クラスコンポーネントがままならないのに、関数コンポーネントに手を出し、ぐちゃぐちゃになったので、クラスコンポーネントで、ある程度自走出来るようになって、もう少しレベルアップしてから、再度、関数コンポーネントの勉強したいと思います。