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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

1回答

504閲覧

React-hook-form で Array & Conditional Fields を組み合わせた際にエラーがでる

07290729

総合スコア15

React.js

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

0グッド

0クリップ

投稿2020/04/03 14:12

以下のSampleページを参照しながら
チェックボックスにチェックを入れた際に
Array形式で入力できるようなフォームを作成中なのですが
見よう見まねで書いたためかと思いますが
エラーが出てしまいます。。。

https://codesandbox.io/s/6j1760jkjk
https://codesandbox.io/s/13ykqx4wx7

Failed to compile. ./src/index.js Line 77:7: Parsing error: Unexpected token, expected "," 75 | </button> 76 | </div> > 77 | } | ^ 78 | )} 79 | <input type="submit" /> 80 | </form>

どのあたりを修正すべきか
ご教示いただければ幸いです。。。
よろしくお願いいたします。

以下、コードを記載します。

  • index.js
1 import React from "react"; 2 import ReactDOM from "react-dom"; 3 import { useForm } from "react-hook-form"; 4 5 import "./index.css"; 6 7 function App() { 8 const { register, watch, handleSubmit } = useForm(); 9 const onSubmit = data => { 10 alert(JSON.stringify(data)); 11 }; 12 13 const moreDetail = watch("moreDetail"); 14 const [indexes, setIndexes] = useState([]); 15 const [counter, setCounter] = useState(0); 16 17 const addFriend = () => { 18 setIndexes(prevIndexes => [...prevIndexes, counter]); 19 setCounter(prevCounter => prevCounter + 1); 20 }; 21 22 const removeFriend = index => () => { 23 setIndexes(prevIndexes => [...prevIndexes.filter(item => item !== index)]); 24 setCounter(prevCounter => prevCounter - 1); 25 }; 26 27 return ( 28 <form onSubmit={handleSubmit(onSubmit)}> 29 <label htmlFor="firstName">First Name</label> 30 <input name="firstName" placeholder="Bill" ref={register} /> 31 <label htmlFor="lastName">Last Name</label> 32 <input name="lastName" placeholder="Luo" ref={register} /> 33 <label htmlFor="email">Email</label> 34 <input 35 name="email" 36 placeholder="hello@testmail.com" 37 type="email" 38 ref={register} 39 /> 40 <label htmlFor="lastName">More Details</label> 41 <input name="moreDetail" type="checkbox" ref={register} /> 42 43 {moreDetail && ( 44 <div> 45 {indexes.map(index => { 46 const fieldName = `friends[${index}]`; 47 return ( 48 <fieldset name={fieldName} key={fieldName}> 49 <label> 50 First Name {index}: 51 <input 52 type="text" 53 name={`${fieldName}.firstName`} 54 ref={register} 55 /> 56 </label> 57 58 <label> 59 Last Name {index}: 60 <input 61 type="text" 62 name={`${fieldName}.lastName`} 63 ref={register} 64 /> 65 </label> 66 <button type="button" onClick={removeFriend(index)}> 67 Remove 68 </button> 69 </fieldset> 70 ); 71 })} 72 73 <button type="button" onClick={addFriend}> 74 Add Friend 75 </button> 76 </div> 77 } 78 )} 79 <input type="submit" /> 80 </form> 81 ); 82 } 83 84 const rootElement = document.getElementById("root"); 85 ReactDOM.render(<App />, rootElement); 86

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

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

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

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

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

guest

回答1

0

ベストアンサー

77行目に、不必要な}があるのが原因だと思います。消して実行してみましょう。

補足ではありますが、こういった構文エラーを防ぐために、エディタ上で構文ミスを指摘してくれるエディタの使用をおすすめします。
Reactを書いていく上では、Visual Studio Codeがおすすめです。

投稿2020/04/03 20:28

mottox2

総合スコア299

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

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

07290729

2020/04/04 02:51

うまくいきました! こんなケアレスミスを。。。お恥ずかしいです(>< おっしゃるようなEditorを使うようにします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問