react(typescript)を使ったコードの、SyntaxError(Unexpected token~)が解消できない

Question

■環境

・windows10(home)
・react@16.14.0
・typescript@4.0.3

■困っていること

amazon(kindle書籍)で購入した初心者向けの参考書をもとに、React(Typescript)・Firebaseの学習をしています。

サンプルコードのとおりに進めている自己認識なのですが、「npm start」すると、以下エラーが出てしまっており、自己解決できずご質問させていただきました次第です。

■サンプルコードの趣旨

(前画面に設置された検索枠に入力されたワードをkeywordに持つ)画像データをfirestoreから検索・表示するための画面になります。
…(当コードに於いては、)前画面の検索文字は、useParamsを使って、keywordという変数に格納→firestoreの「TileData」のうち、keywordに対象検索文字を含むレコードを、「TileData」型変数(types.tsという型定義のみファイルで定義)として格納し、表示に至ります。

firestoreに格納したデータ

エラーに関する現状理解・追えていること

「data.map((tile)」の、dataがmapできない旨のエラー対象と認識しています。
ですので、dataという変数の定義(※。9行目)をみると、
※9行目：const[data,setData]=useState<TileData[]>([]);
(少なくとも初期値にて)配列として型定義をしているので、変数dataが配列以外になっている可能性はないもの、と想定しております。が、、mapでの繰り返し処理はできない…という壁に現状で止まっている次第でございます。。

■エラー内容詳細

SyntaxError: ~resultImageList.ts: Unexpected token, expected "," (32:11)

  30 |   return (
  31 |     <div>
  32 |       {data.map((tile)=>(
                  ^
  33 |         <div>
  34 |           <img src={tile.image} alt={tile.title} />
  35 |         </div>

■関連するサンプルコード詳細

★resultImageList.ts

import React,{FC,useState,useEffect} from "react";
import {useParams} from 'react-router-dom';

import firebase from '../../firebase';
import {TileData} from "../../types/types";


const ImageItemList:FC=()=>{
  const[data,setData]=useState<TileData[]>([]);
  const{keyword}=useParams();
  
  const getData = async(searchWord: string | undefined) => {
    const db = firebase.firestore();
    const tileDataRef = db.collection("tileData");
    const searchedData = tileDataRef.where("keyword","array-contains",searchWord);
    const snapShot = await searchedData.get();
    const temporaryData: object[] = [];
    
    snapShot.docs.map(doc => {
      temporaryData.push(doc.data());
    })
    
    setData(temporaryData as TileData[]);
  }
  
  useEffect(() => {
    getData(keyword);
  },[]);
  
  return (
    <div>
      {data.map((tile)=>(
        <div>
          <img src={tile.image} alt={tile.title} />
        </div>
      ))}
    </div>
  )
}
export default ImageItemList;

★types.ts

export type TileData={
  image: string;
  keyword:string[];
  title: string;
}

以上、不明点等ありましたらその旨ご教示くださいますと幸いでございます。
何卒よろしくお願いいたします。

Answer 1

.tsファイルにJSXは書けません。拡張子を.tsxに変更してください。

Comments

[wwwww]

ありがとうございます！
ご記載のとおりtsxにして再実行したら、当該エラーは解消しました！(また別のエラーが出現しました…)
初歩的な問題にてお手数おかけいたしましたm(_ _)m