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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

20918閲覧

React.js Unexpected token, expectedエラーの原因を知りたいです。

hitominjar

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2018/05/15 13:41

編集2018/05/16 09:35

前提・実現したいこと

・ひとまず試しに、サンプルコードを表示させたい
まだJavascript React.jsの初心者なので、ひとまずサンプルコードを表示させて見たいと思ったのですが、うまくいきません。原因がどこなのか、どこを見ればわかるのか、など教えていただければ助かります。

発生している問題・エラーメッセージ

エラーが出ており、画面に何も表示されない状況になっています。

console

1bundle.js:27598 Uncaught Error: Module build failed: SyntaxError: Unexpected token, expected } (71:6) 2 3 69 | // propの型を指定 4 70 | propTypes = { 5> 71 | data: React.PropTypes.array.isRequired 6 | ^ 7 72 | }; 8 73 | 9 74 | class Form extends Component { 10

該当のソースコード

React.js

1import React, { Component } from 'react'; 2import { render } from 'react-dom'; 3 4class Items extends Component { 5 // Itemsに渡された配列をpropで受け取り、初期state値として設定 6 constructor(props) { 7 super(props); 8 this.state = { 9 data: props.data 10 }; 11 } 12 handleFilterVal(val) { 13 // JavaScriptのfilter()メソッドで絞り込み、絞り込んだ配列をline変数に格納 14 const line = this.props.data.filter((item) => ( 15 // idまたはnameにキーワードが含まれていればtrueを返す 16 item.id.toString().indexOf(val) >= 0 17 || item.name.toLowerCase().indexOf(val) >= 0 18 )); 19 // setStateを実行 20 this.setState({ 21 data: line 22 }); 23 } 24 // 昇順で並び替えるメソッドを定義 25 handleSortByAscend(key) { 26 const line = this.state.data.sort((a, b) => { 27 if (a[key] < b[key]) return -1; 28 if (a[key] > b[key]) return 1; 29 return 0; 30 }); 31 this.setState({ 32 data: line 33 }); 34 } 35 // 降順で並び替えるメソッドを定義 36 handleSortByDescend(key) { 37 const line = this.state.data.sort((a, b) => { 38 if (a[key] < b[key]) return 1; 39 if (a[key] > b[key]) return -1; 40 return 0; 41 }); 42 this.setState({ 43 data: line 44 }); 45 } 46 render() { 47 // stateを通して配列をmapして動的にVirtualDOMを作成し、list変数に格納 48 let list = this.state.data.map((data) => ( 49 <li key={data.id}> 50 {data.id}: {data.name} 51 </li> 52 )); 53 return ( 54 <div> 55 <div> 56 <Form onFilterVal={this.handleFilterVal.bind(this)} /> 57 {/* SortButtonコンポーネントを追加し、上記で定義したhandleSortByAscend()メソッドとhandleSortByDescend()メソッドを渡す */} 58 <SortButton 59 onSortByAscend={this.handleSortByAscend.bind(this)} 60 onSortByDescend={this.handleSortByDescend.bind(this)} 61 /> 62 <ul> 63 {list} 64 </ul> 65 </div> 66 ); 67 } 68} 69// propの型を指定 70Items.propTypes = { 71 data: React.PropTypes.array.isRequired 72}; 73 74class Form extends Component { 75 _filterVal() { 76 // refsを通してinput要素に入力された値を取得 77 const val = this.refs.myinput.value; 78 // propsを通して受け取ったonFilterVal()メソッド(handleFilterVal()メソッド)を実行 79 this.props.onFilterVal(val); 80 } 81 render() { 82 return ( 83 <div> 84 <span style={{ marginRight: '8px', fontSize: '12px' }} 85 キーワードで絞り込む: 86 </span> 87 {/* 配列を絞り込むための値を入力するためのinput要素 */} 88 <input 89 type="text" 90 ref="myinput" 91 defaultValue="" 92 onKeyUp={this._filterVal.bind(this)} 93 /> 94 </div> 95 ); 96 } 97} 98// propの型を指定 99Form.propTypes = { 100 onFilterVal: React.PropTypes.func.isRequired 101}; 102class SortButton extends Component { 103 _sortByAscend(e) { 104 e.preventDefault(); 105 // button要素に設定したvalue値を引数にセットし、handleSortByAscend()メソッドを実行 106 this.props.handleSortByAscend(e.target.value); 107 } 108 _sortByDescend(e) { 109 e.preventDefault(); 110 // button要素に設定したvalue値を引数にセットし、handleSortByDescend()メソッドを実行 111 this.props.handleSortByDescend(e.target.value); 112 } 113 render() { 114 return ( 115 <div> 116 <div> 117 <span style={{ marginRight: '8px', fontSize: '12px' }}> 118 idでソート: 119 </span> 120 {/* idで昇順にソートするボタン(valueにidを設定) */} 121 <button onClick={this._sortByAscend.bind(this)} value="id"> 122 昇順 123 </button> 124 {/* idで降順にソートするボタン(valueにidを設定) */} 125 <button onClick={this._sortByDescend.bind(this)} value="id"> 126 降順 127 </button> 128 </div> 129 <div> 130 <span style={{ marginRight: '8px', fontSize: '12px' }}> 131 nameでソート: 132 </span> 133 {/* nameで昇順にソートするボタン(valueにnameを設定) */} 134 <button onClick={this._sortByAscend.bind(this)} value="name"> 135 昇順 136 </button> 137 {/* nameで降順にソートするボタン(valueにnameを設定) */} 138 <button onClick={this._sortByDescend.bind(this)} value="name"> 139 降順 140 </button> 141 </div> 142 </div> 143 ); 144 } 145} 146// propの型を指定 147SortButton.propTypes = { 148 handleSortByAscend: React.PropTypes.func.isRequired, 149 handleSortByDescend: React.PropTypes.func.isRequired 150}; 151 152// idとnameを持ったオブジェクトの配列を作成 153let data = [ 154 { id: 1, name: 'foo' }, 155 { id: 2, name: 'bar' }, 156 { id: 3, name: 'baz' }, 157 { id: 4, name: 'qux' }, 158 { id: 5, name: 'quux' }, 159 { id: 6, name: 'foobar' } 160]; 161 162render( 163 // 配列をItemsコンポーネントに渡す 164 <Items data={data} />, document.querySelector('.content') 165);

試したこと

・どこを見ればいいのか、わからなくて、方法が見つかっていません。ひとまずコンソールをチェックして下記のエラーを確認しました。

throw new Error("Module build failed: SyntaxError: Unexpected token, expected } (71:6)\n\n 69 | // propの型を指定\n 70 | propTypes = {\n> 71 | data: React.PropTypes.array.isRequired\n | ^\n 72 | };\n 73 | \n 74 | class Form extends Component {\n");

補足情報(FW/ツールのバージョンなど)

何か追加で必要な情報があればお答えでき

<div>が二回続く部分を修正しました。

次はこの部分にエラーが起こっているようなのですが、何が問題なのでしょうか?><

console

1bundle.js:27598 Uncaught Error: Module build failed: SyntaxError: Unexpected token (85:8) 2 3 83 | <span style={{ marginRight: '8px', fontSize: '12px' }} 4 84 | キーワードで絞り込む: 5> 85 | </span> 6 | ^ 7 86 | {/* 配列を絞り込むための値を入力するためのinput要素 */} 8 87 | <input 9 88 | type="text"

<span>の閉じ括弧を追加修正しました。

次にこのようなエラーが出たのですが、何が問題なのでしょうか。。。><

console

1Warning: _renderNewRootComponent(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of StartApplication.

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

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

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

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

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

guest

回答1

0

ベストアンサー

<div> が2つ並んでるのが原因じゃないでしょうか。

jsx

1 return ( 2 <div> 3 <div> 4 <Form onFilterVal={this.handleFilterVal.bind(this)} /> 5 {/* SortButtonコンポーネントを追加し、上記で定義したhandleSortByAscend()メソッドとhandleSortByDescend()メソッドを渡す */} 6 <SortButton 7 onSortByAscend={this.handleSortByAscend.bind(this)} 8 onSortByDescend={this.handleSortByDescend.bind(this)} 9 /> 10 <ul> 11 {list} 12 </ul> 13 </div> 14 );

投稿2018/05/15 14:52

yhg

総合スコア2161

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

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

hitominjar

2018/05/15 15:04

ありがとうございます。Divが二回続いている箇所を見落としておりました。 しかし依然まだエラーが続いているようなのですが、<span>の部分がなぜエラーなのかがわかりません。
yhg

2018/05/15 15:12

<span の後ろの > が抜けてますね
hitominjar

2018/05/16 09:36

すみません!ありがとうございます! まだ新たなエラーなのですが、どう意味なのかわかりますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問