『Search for the keywords to learn more about each error. 』を改善したい
Q&A
Closed
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;
0