【React】map関数を使用して画面に表示する

map関数を使用してJSXを画面に表示する際に沼にハマったので備忘録としてメモに残す。

誤りのコード

type Books = {
    src: Book[];
}

type Book = {
    isbn: string,
    title: string,
    price: number
}

export default function ForList({src}: Books) {
    return (
        <dl>
            {
                src.map((elem: Book) => {  // この{}が誤りの部分
                    <>
                        <dt>
                            <p>{elem.title}({elem.price})</p>
                        </dt>
                    </>
                })
            }

        </dl>
    )
}

正しいコード

type Books = {
    src: Book[];
}

type Book = {
    isbn: string,
    title: string,
    price: number
}

export default function ForList({src}: Books) {
    return (
        <dl>
            {
                src.map((elem: Book) => {  // {}ではなく()
                    <>
                        <dt>
                            <p>{elem.title}({elem.price})</p>
                        </dt>
                    </>
                })
            }

        </dl>
    )
}

なぜ{}ではなく()にする必要があるのか

map のコールバック関数は配列の各要素を「処理して新しい値を返す」必要がある。
各要素をreturnする必要があるため、{}ではなく()で記述する必要がある。
returnをmap関数内で記述しない場合、undefinedが返されてしまう。

const numbers = [1, 2, 3];
const doubled = numbers.map((num) => {
  num * 2; // ここに return がない！
});

console.log(doubled); // [undefined, undefined, undefined]

{}と()の違い

{}: 関数本体を表現する場合に使用。returnを明示的に記載する必要がある。
(): アロー関数の戻り値を省略記法で記述するために使用。この場合は return を書かなくても、関数の結果として括弧内の値がそのまま返される。