React.js エラーの原因がわかりません。

Question

やりたいこと

• エラーの原因を知りたい

試したこと

下のコードでエラーが出てしまいました。

▼React.js

render() {
    const textList = ['This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card', 'This is a card'];
    const renderitem = (text) => (
      <div>
        <img src="http://placehold.jp/150x150.png"/>
        <p>{text}</p>
      </div>
    );
    return (
      <div>
        {...textList.map(renderitem)}
      </div>
    );
  }

エラーの内容はこちらです。

▼コンソール

bundle.js:27599 Uncaught Error: Module parse failed: /home/hfukatani/hive/frontend/node_modules/babel-loader/lib/index.js??ref--0!/home/hfukatani/hive/frontend/src/Frontend/javascripts/styleguide/Items.jsx Unexpected token (53:9)
You may need an appropriate loader to handle this file type.
|         'div',
|         null,
|         {...textList.map(renderitem)}
|       );
|     }

Answer 1

表示されているエラーへの直接的な対処を考える前に、まずは以下のコードを

return (
      <div>
        {...textList.map(renderitem)}
      </div>
    );

から、

return (
      <div>
        {textList.map(renderitem)}
      </div>
    );

に、とりあえず変えてみて下さい。

これでエラーが消えない場合は、原因は表示されているエラーの通りになるので、必要なloader周りを確認してみて下さい。

Comments

[hitominjar]

なるほどですね＞＜
初心者すぎて、どこを見たらいいのか検討が付いていませんでした＞＜
ありがとうございます。