『'return' outside of function』を改善したい

Question

ReactでMaterial-UI を使用して、Web フォームを作成しています。

相談内容(Optional.js)を確認画面(contents.js/case3)に表示する為の実装を行い、ソースコードを記入して
npm startをしたら、『'return' outside of function』という書きのエラーが表示されるので、それを改善したい。

/src/components/Optional.js: 'return' outside of function.

  15 |         setCurrentState({...currentState, "Optional": data });
  16 |     };
> 17 |   return (
     |   ^
  18 |     <div>
  19 |       <Grid container>
  20 |         <Grid sm={2} />

どのように実装したら良いかわからない状況で、詰まっています。 何方かアドバイスをお願いします。

期待する動作
『'return' outside of function』を改善したい

問題解決のため行なったこと
『'return' outside of function』で検索して、記事を読んだが該当する内容ではないため、改善しなかった。

src / components / Optional.js

import React from "react";
import { Grid } from "@mui/material";
import Tooltip from "@mui/material/Tooltip";
import TextField from "@mui/material/TextField";
import { UserInputData } from "./Content";

function Optional (props) {
  const { getValues } = useForm({
        defaultValues: {
        multilineText: "",
        },
    });
    const { currentState, setCurrentState } = useContext(UserInputData);
        const data = getValues();
        setCurrentState({...currentState, "Optional": data });
    };
  return (
    <div>
      <Grid container>
        <Grid sm={2} />
        <Grid lg={8} sm={8} spacing={10}>
          <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow>
            <TextField
              label="ご相談内容"
              fullWidth
              margin="normal"
              rows={4}
              multiline
              variant="outlined"
              placeholder="その他ご要望等あれば、ご記入ください"
            />
          </Tooltip>
        </Grid>
      </Grid>
    </div>
  );
};
export default Optional;

src / components / contents.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 Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Basic from "./Basic";
import Questionnaire, { QUESTIONS } from "./Questionnaire";
import Optional from "./Optional";

function getSteps() {
  return ["お客様の情報を入力して下さい", "以下にお答え下さい", "ご相談下さい", "以下の内容をご確認下さい"];
}

const StepContent = ({ stepIndex, BasicProps, questionnaireProps, OptionalProps }) => {
  switch (stepIndex) {
    case 0:
      return <Basic {...BasicProps} />;
    case 1:
      return <Questionnaire {...questionnaireProps} />;
    case 2:
      return <Optional {...OptionalProps} />;
    case 3:
      return (
        <div style={{ textAlign: "center" }}>
          <Basic {...BasicProps} />
          <Questionnaire {...questionnaireProps} />
          <Optional {...OptionalProps} />
        </div>
      );
    default:
      return "Unknown stepIndex";
  }
};
function Content() {
  const [activeStep, setActiveStep] = React.useState(0);
  const [answers, setAnswers] = React.useState(Array(QUESTIONS.length).fill(null));
  const steps = getSteps();
  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };
  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };
  const handleReset = () => {
    setActiveStep(0);
  };
  const buttonDisabled = activeStep === 1 && answers.some((a) => !a);
  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>
        {activeStep === steps.length ? (
          <div style={{ textAlign: "center" }}>
            <Typography>全ステップの表示を完了</Typography>
            <Button onClick={handleReset}>リセット</Button>
          </div>
        ) : (
          <div>
            <Typography>
              <StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />
            </Typography>
            <Button disabled={activeStep === 0} onClick={handleBack}>
              戻る
            </Button>
            <Button variant="contained" color="primary" onClick={handleNext} disabled={buttonDisabled}>
              {activeStep === steps.length - 1 ? "送信" : "次へ"}
            </Button>
          </div>
        )}
      </Grid>
    </Grid>
  );
}
export default Content;

Answer 1

Optional()のインデントがおかしいので、それを直すと以下のようになります。

function Optional (props) {
  const { getValues } = useForm({
      defaultValues: {
          multilineText: "",
      },
  });
  const { currentState, setCurrentState } = useContext(UserInputData);
  const data = getValues();
  setCurrentState({...currentState, "Optional": data });
};
return (

return が関数の外にあるのが理解できるでしょうか。このreturn は Optinal() の中に書くべきものだと推測します。

Comments

[edu]

int32_tさん、回答、ありがとうございます！
『このreturn は Optinal() の中に書くべきものだと推測します。』
申し訳ないのですが、申し少し詳しく教えて頂けないですか？

[int32_t]

これ以上詳しく書きようがない気がします…
contents.js の関数 Content() と同じように、return を function Optional(props) {...} の中の最後に入れればよいのでは?

これで理解できないようなら、JavaScript の入門書を読むことをおすすめします。

[edu]

int32_tさん、丁寧な解説付きのアドバイス、ありがとうございます！
他の書き方を探してみます。