質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1206閲覧

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

edu

総合スコア35

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/11/07 12:50

編集2021/11/16 02:18

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

Optional.js

1 2import React from "react"; 3import { Grid } from "@mui/material"; 4import Tooltip from "@mui/material/Tooltip"; 5import TextField from "@mui/material/TextField"; 6import { UserInputData } from "./Content"; 7 8function Optional (props) { 9 const { getValues } = useForm({ 10 defaultValues: { 11 multilineText: "", 12 }, 13 }); 14 const { currentState, setCurrentState } = useContext(UserInputData); 15 const data = getValues(); 16 setCurrentState({...currentState, "Optional": data }); 17 }; 18 return ( 19 <div> 20 <Grid container> 21 <Grid sm={2} /> 22 <Grid lg={8} sm={8} spacing={10}> 23 <Tooltip title="ご相談内容を記入することができます" placement="top-start" arrow> 24 <TextField 25 label="ご相談内容" 26 fullWidth 27 margin="normal" 28 rows={4} 29 multiline 30 variant="outlined" 31 placeholder="その他ご要望等あれば、ご記入ください" 32 /> 33 </Tooltip> 34 </Grid> 35 </Grid> 36 </div> 37 ); 38}; 39export default Optional; 40

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

js

1function Optional (props) { 2 const { getValues } = useForm({ 3 defaultValues: { 4 multilineText: "", 5 }, 6 }); 7 const { currentState, setCurrentState } = useContext(UserInputData); 8 const data = getValues(); 9 setCurrentState({...currentState, "Optional": data }); 10}; 11return (

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

投稿2021/11/16 02:20

int32_t

総合スコア21708

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

edu

2021/11/16 02:24

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

2021/11/16 02:39

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

2021/11/16 02:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問