Propsの使い方[React]

Propsとは

親コンポーネントから子コンポーネントへ受け渡すときに使います。

今回の場合は、

• 親コンポーネント：App.jsx
• 子コンポーネント：Button.jsx

親がimport Button from './Button';インポートして、Buttonコンポーネントを表示しています。
親からButtonコンポーネントのtitleを変更しています。Button.jsxでpropsを使って受け取り、{props.title}と記述することでtitleを受け取ることができます。

App.jsx

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <>
      <Button title='index'/>
      <Button title='show'/>
      <Button title='update'/>
      <Button title='destroy'/>
      <Button title='new'/>
    <>
  );
};

export default App;

Button.jsx

import React from 'react';

const Button = (props) => {
  return (
    <>
      {props.title}
    <>
  );
};

export default Button;

参考

[公式のリンク]コンポーネントと props