I want to change the value of an object in array using useState

Question

The language in state. data is an array.
It contains Language and Level objects.

I want to put the value of the argument in the level of state.
language when the process of onClickUpdatelanguage is called.

interface Data {
  name: string;
  language: Language[];
}

interface Language {
  lang: Lang;
  level: Level;
}
interface Lang {
  id: name;
  name: string
}
interface Level {
  id: name;
  name: string
}

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

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


const onClickUpdateLanguage = (value: Level, updateStateId: number) => {
    const target = state.data.language.find((st) => {
      return st.language.id === updateStateId;
    });

};

Answer 1

You can use the setState functionality and map over the current state date. Then edit the data where necessary.

setState({
    data: state.data.language.map(iState => {
      if(iState.language.id === updateStateId) {
          iState.language.level = value;
      }
      return iSate;
    })
});

I've might missed out in which parameter you want to change exactly, but this should give you some direction.