react stateに値を保存する関数をまとめたい

Question

inputの入力時にstateに値を保存したくhandleInputSearchName、handleInputSearchAge,handleInputSearchCompanyという3つの関数を作りました。
保存されるstateが違うだけで処理が一緒なので関数をまとめてあげたいのですがどうしたらいいでしょうか？

わかる人いましたらご教授お願いしたいです。

import React, { FunctionComponent } from "react";
import styled from "styled-components";

interface ISearch {
  name: string;
  age: string;
  copmpany: string;
}

interface IState {
　message: string
  searchState: ISearch[];
}

export const User: FunctionComponent = () => {
  const [state, setState] = useState<IState>({
　　message,
    searchState: [],
  });

  const handleInputSearchName = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: {name: e.target.value } } });
  };
  const handleInputSearchAge = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: { age: e.target.value } } });
  };
  const handleInputSearchCompany = (e:React.ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, ...{ searchState: { company: e.target.value } } });
  };

  return (
    <div>
        <Input onClick={() => handleInputSarchName}>{name}</input>
        <Input onClick={() => handleInputSarchAge}>{age}</input>
        <Input onClick={() => handleInputSarchCompany}>{company}</input>
    </div>
  );
};

Answer 1

searchState内のキーごと渡すようにしてはどうでしょうか？

export const User: FunctionComponent = () => {
  const [state, setState] = useState<IState>({
    searchState: [],
  });

  const handleInputSearch = (e:React.ChangeEvent<HTMLInputElement>, key : string) => {
    setState({ ...state, ...{ searchState: {[key]: e.target.value } } });
  };

  return (
    <div>
        <Input onClick={(e) => handleInputSearch(e,'name') }>{name}</input>
        <Input onClick={(e) => handleInputSearch(e,'age') }>{age}</input>
        <Input onClick={(e) => handleInputSearch(e,'company') }>{company}</input>
    </div>
  );
};

Comments

[退会済みユーザー]

回答ありがとうございます。
プロパティ 'searchState' の型に互換性がありません。
型 '{ [x: string]: string; }' には 型 'ISearch[]' からの次のプロパティがありません: length, pop, push, concat、28 など。というエラーになったのですがどうしたらいいでしょうか？

[nekoniki]

提示いただいたソースで再び動かしているのですが、修正前から同エラーで動作しません。
お手元ではエラーが出ない状態ですか？

[yuyuyuooo]

解決したならベストアンサーに選んでください

[退会済みユーザー]

すいません。他のとこがおかしかったです。解決できました。ありがとうございます