React 関数コンポーネントでのコンポーネント間での状態連携（値の受け渡し）

useState の利用

まずは、useState で受け渡しする状態を定義します。今回は boolean 型の状態を保持します。

App.tsx

import React, { useState } from 'react';
import './App.css';
import MyButton from './MyButton';
import MyEditor from './MyEditor';

function App() {
  const [stateProp, setStateProp] = useState<boolean>(false);
  const updateState = (): void => setStateProp(!stateProp);
  
  return (
    <div className="App">
      <MyButton toggleState={updateState} />
      <div>{stateProp}</div>
      <MyEditor isEditable={stateProp} />
    </div>
  );
}

export default App;

props による setter の連携

props を利用して useState の setter を子コンポーネントに渡します。子コンポーネントから setter を呼び出すことで、別の子コンポーネントの状態を切り替えることができます。

MyButton.tsx

import React from "react";

type Props = {
  toggleState: () => void;
};

const MyButton = (props: Props) => {
  const handleClick = () => {
    if (props.toggleState) {
      props.toggleState();
    }
  };
  return (
    <div>
      <button onClick={handleClick}>編集可否切り替え</button>
    </div>
  );
};

export default MyButton;

別コンポーネントへの状態連携

MyButton.tsx 上での操作で切り替えられた値を、MyEditor.tsx 側でバインドします。

MyEditor.tsx

import React from "react";

type Props = {
  isEditable: boolean;
};

const MyEditor = (props: Props) => {
  return (
    <div>
      <input type="text" disabled={props.isEditable} />
    </div>
  );
};

export default MyEditor;

React おすすめの学習教材

これから React の学習に取り組もうと考えている場合、Udemy の次の講義がおすすめです！React 開発で必須となる JavaScript の前提知識についても学習できますし、土台作りに最適です👌

モダンJavaScriptの基礎から始める挫折しないためのReact入門