【React】配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法

2023年10月18日React

Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。

Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法

以下のようなオブジェクトをもった配列を例とします。

const cartItems = [
  {
    id: 1,
    title: "タイトル1",
    price: "100",
    img: "image-path.jpg",
    amount: 1,
  },
  {
    id: 2,
    title: "タイトル2",
    price: "100",
    img: "image-path.jpg",
    amount: 1,
  },
  {
    id: 3,
    title: "タイトル3",
    price: "100",
    img: "image-path.jpg",
    amount: 1,
  },
  {
    id: 4,
    title: "タイトル4",
    price: "100",
    img: "image-path.jpg",
    amount: 1,
  },
  {
    id: 5,
    title: "タイトル5",
    price: "100",
    img: "image-path.jpg",
    amount: 1,
  },
];

これをpropsとして渡すときいちいちmapメソッドの中でtitle={item.title}などとはしていられません。

次のようにします。

分割代入ですべてpropsとして渡す

import React from "react";
import { useSelector } from "react-redux";
import CartItem from "./CartItem";

const CartContainer = () => {
  const { cartItems, amount, total } = useSelector((state) => state.cart);
  return (
        <div>
          {cartItems.map((item) => {
            return <CartItem key={item.id} {...item} />;
          })}
        </div>
  );
};

export default CartContainer;

ポイントは{...item}です。
分割代入することで、すべてのオブジェクトの値を渡すことができます。

分割代入ですべてのpropsを受け取る

import React from "react";

const CartItem = ({ id, img, title, price, amount }) => {
  return (
    <article className="cart-item">
      <img src={img} alt={title} />
      <div>
        <h2>{id}: {title}</h2>
        <h4>¥{price}</h4>
      </div>
    </article>
  );
};

export default CartItem;