Reactでオブジェクトをpropsとして渡す方法

まず、親コンポーネントで渡したいオブジェクトを定義します。例えば、以下のようなオブジェクトを考えましょう。

const user = {
  name: "John",
  age: 25,
  email: "[email protected]"
};

次に、子コンポーネントを作成し、propsとしてオブジェクトを渡します。

import React from "react";
const ChildComponent = (props) => {
  return (
    <div>
      <p>Name: {props.user.name}</p>
      <p>Age: {props.user.age}</p>
      <p>Email: {props.user.email}</p>
    </div>
  );
};
export default ChildComponent;

親コンポーネントで子コンポーネントを使用する際に、propsとしてオブジェクトを渡します。

import React from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
  const user = {
    name: "John",
    age: 25,
    email: "[email protected]"
  };
  return (
    <div>
      <h1>User Details</h1>
      <ChildComponent user={user} />
    </div>
  );
};
export default ParentComponent;

これで、親コンポーネントから子コンポーネントにオブジェクトがpropsとして渡されます。子コンポーネントでは、props.userを通じてオブジェクトのプロパティにアクセスすることができます。

以上がReactでオブジェクトをpropsとして渡す方法となります。この方法を使うことで、コンポーネント間で複数のデータを効率的に渡すことができます。