react stateの変更

stateのdataのname,age,countryのqueryの部分を変えたいです。
...{data: { ...state.data, [key].query: e.target.value } }としたのですが[key].queryのところでParsing error: ':' expected.eslintとなってしまいます。
どう修正したらいいでしょうか？
わかる人いたら教えて欲しいです。


interface Data {
  name?: Name;
  age?: Age;
  country?: Country;
}

interface Name {
  query: string;
  current: boolean;
}

interface Age {
  query: string;
  current: boolean;
}

interface Country {
  query: string;
  current: boolean;
}

const initial: Name | Age | Country = {
  query: '',
  current: false,
};

const initialdata: Data = {
  name: initial,
  age: initial,
  country: initial,
}

interface State {
  data: Data;
  text: string;
  modal: boolean
}

const Index: FC = () => {
  const [state, setState] = useState<State>({
    data: initialdata,
    text: '',
    modal: false,
  });


  // この関数を呼び出すところではonChangeWithKey(ChangeEvent<HTMLInputElement>, 'name')のようにDataののname,age,countryのどれかを渡してあげている
  const onChangeWithKey = (e: any, key: string) => {
    setState({ ...state, ...{data: { ...state.data, [key].query: e.target.value } } });
  };

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

動作確認してみたわけではありませんが、下記の修正でいかがでしょうか？

修正前：

typescript
1const onChangeWithKey = (e: any, key: string) => {
2  setState({ ...state, ...{data: { ...state.data, [key].query: e.target.value } } });
3}

修正後：

typescript
1const onChangeWithKey = (e: any, key: 'name'|'age'|'country') => {
2  setState({ ...state, data: { ...state.data, [key]: { ...state.data[key], query: e.target.value }}});
3};