【アロー関数】ReactのJSX内でmapを使って表示ができない問題

JSおよびReact初心者で、学習中に題名の問題が発生しました
結構詰まったものの、原因が基本的な事だったため同じ轍を踏まないよう記事とします

問題

以下のコードで発生しました

export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                <span>{col.key}</span>
            })}
        </div>
    )
};

原因

アロー関数の使い方が間違っていました
アロー関数の=>の後に{ }を外したところ動作しました

export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => 
                <span>{col.key}</span>
            )}
        </div>
    )
};

{ }をつけると文、外すと式となるようです

{ }でも、returnしてあげればうまく動作します
map内で何かしら処理を書く時に使えそうです

export const DataTable = ({data}) => {
    return (
        <div>
            {data.map((col) => {
                return (<span>{col.key}</span>);
            })}
        </div>
    )
};

最後に

慣れていない言語のエラーに対処する際は、基本的な構文から確認する必要があると感じました。（ずっと詰まっていたので大変でした…）

参考