Array.map関数を使ってイテレータからコンポーネントを生成しようとした時の備忘録。

コード

App.tsx

export default function App() {
    return (
        <Box>
            {
                keys.map( key => (
                    <Button>{ key }</Button>
                ));
            }
        </Box>
    )
}

エラー

Unexpected token 'Box'. Expected JSX identifier
（このエラー、<Box>自体ではなくその子要素の文法が間違っている時に出てきて分かりづらい）

解決

不必要な;を外す

App.tsx

// --snip--
<Box>
    {
        keys.map( key => (
            <Button>{ key }</Button>
        )) // ここにあったコンマを外す
    }
</Box>