javascript - ブール状態セッターを再利用可能にする方法

Question

現在、ヘッダー付きのページがあります: h1、h2、h3。ユーザーのonClickがテキストを編集できるようにしたいので、基本的にヘッダーはinput type = 'text'になり、ユーザーが入力に値を入力し終わるとヘッダーに戻ります。この機能は、それぞれに関連する対応する値をディスパッチする useReducer フックを使用して非常にうまく機能しています。ただし、3 つのコンポーネントすべてで textIsEditing prop/boolean を再利用可能にする方法を理解するのに苦労しています。コードでもう少し説明しましょう。

JSON データ:

{
  "name":"Click to rename One",
  "campaigntype": "Click to rename Two",
  "description": "Click to rename Three",
}

3 つのヘッダーを保持するコンポーネント:

export default function MetaData() {
  const [nameIsEditing, setNameEditing] = useState(false);
  const [campaignIsEditing, setCampaignIsEditing] = useState(false);
  const [descriptionIsEditing, setDescriptionIsEditing] = useState(false);

  function toggleNameEdit(){
    setNameEditing(!nameIsEditing);
  }
  function toggleCampaignEdit(){
    setCampaignIsEditing(!campaignIsEditing);
  }
  function toggleDescriptionEdit(){
    setDescriptionIsEditing(!descriptionIsEditing);
  }

  const initialState = jsonData;

  const [metaData, dispatch] = useReducer(metaDataReducer, initialState);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const defaultMetaValue = metaData[e.target.name as keyof MetaState];

    dispatch({ type: e.target.name, value: e.target.value === '' ? defaultMetaValue : e.target.value });
  };

  return (
    <Grid className='menuItem' container direction='column'>

      {nameIsEditing ?
        <RenameInput name='name' textStyle='h3' onClickAway={toggleNameEdit} onSubmit={toggleNameEdit} adName={metaData.name} onChange={handleChange} />
        :
        <H1 onClick={toggleNameEdit}>{metaData.name}</H1>}

      {campaignIsEditing ?
        <RenameInput name='campaigntype' textStyle='subtitle2' onClickAway={toggleCampaignEdit} onSubmit={toggleCampaignEdit} campaignType={metaData.campaigntype} onChange={handleChange} />
        :
        <H2 onClick={toggleCampaignEdit}>{metaData.campaigntype}</H2>}

      {descriptionIsEditing ?
        <RenameInput paragraph textStyle='body2' name='description' onClickAway={toggleDescriptionEdit} onSubmit={toggleDescriptionEdit} adDescription={metaData.description} onChange={handleChange} />
        :
        <H3 onClick={toggleDescriptionEdit} className='meta-description'>{metaData.description}</H3>}

    </Grid>);
}

レデューサー:

const metaDataReducer = (state: MetaState, action: ActionType) => {

  if (action.type in state) {
    return { ...state, [action.type]: action.value };
  } else {
    return state;
  }

};

RenameInput:

const RenameInput = (props) => {
  return (
    <ClickAwayListener onClickAway={props.onClickAway}>
      <form onSubmit={props.onSubmit}>
        <TextInput
          defaultValue={props.adName || props.adDescription || props.campaignType}
          autoFocus
          onChange={props.onChange}
          multiline={props.paragraph}
          textStyle={props.textStyle}
          name={props.name}
        />
      </form>
    </ClickAwayListener>
  );
};

私の MetaData コンポーネントでは、コードのこの部分が本当に好きではありません

 const [nameIsEditing, setNameEditing] = useState(false);
  const [campaignIsEditing, setCampaignIsEditing] = useState(false);
  const [descriptionIsEditing, setDescriptionIsEditing] = useState(false);

  function toggleNameEdit(){
    setNameEditing(!nameIsEditing);
  }
  function toggleCampaignEdit(){
    setCampaignIsEditing(!campaignIsEditing);
  }
  function toggleDescriptionEdit(){
    setDescriptionIsEditing(!descriptionIsEditing);
  }

実際には同じことをしているので、これを 3 つのコンポーネントすべてで再利用できるようにしたいと考えています。これらの 3 つすべてを処理する 1 つの関数が必要ですが、どこで、どのようにこれを行うのか本当にわかりません。これをレデューサーで行うか、どうすればこれをファクトリー関数に変換できますか? 私がやった方法よりも良い方法があるに違いない{nameIsEditing ? renameComponent : h1 {campaignIsEditing ? renameComponent : h2 {descriptionIsEditing ? renameComponent : h3