【React】親コンポーネントから子コンポーネントへの引数渡し方メモ

ディレクトリ 構成

src
|-index.js
LTodoList.js

基本ソース

index.js

TodoListコンポーネントを表示しているだけ

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

TodoList.js

TodoListからTodoへ「objectのnameプロパティ」を渡し、Todoが受け取ったnameプロパティを表示させている。
keyプロパティを指定して渡しているのは、渡さないと開発者ツールのコンソール見たときに怒られるから。

qiita.com

import React from 'react';

const objectArray = [
  {id:1, name:"name1"},
  {id:2, name:"name2"},
  {id:3, name:"name3"},
  {id:4, name:"name4"},
  {id:5, name:"name5"},
];

const TodoList = () => {
  return (
    <ul>
      {objectArray.map((object) => <Todo key={object.id} name={object.name} />)}
    </ul>
  )
}

const Todo = (props) => {
  return (
    <li>{props.name}</li>
  )
}

export default TodoList;

TodoListがスプレッド演算子を使用して渡す

以後、TodoListとTodoのソースのみしか変更しないため変更部分のソースのみ掲載

const TodoList = () => {
  return (
    <ul>
      // <Todo key={object.id} id={object.id} name={object.name}/> と同義
      {objectArray.map((object) => <Todo key={object.id} {...object}/>)}
    </ul>
  )
}

const Todo = (props) => {
  return (
    <li>{props.name}</li>
  )
}

export default TodoList;

Todoがプロパティ名を指定して受け取る

const TodoList = () => {
  return (
    <ul>
      {objectArray.map((object) => <Todo key={object.id} {...object} />)}
    </ul>
  )
}

const Todo = ({ name }) => {
  return (
    <li>{name}</li>
  )
}

export default TodoList;

スプレッド演算子を使用して子コンポーネントにプロパティを渡すやり方を知らなかったのでメモ。