react I want to add a value to an array of state

Question

development enviroment
・ react
・ typescript

state groups are arrays.
I want to add a group to the array of groups when the onClickGroups function is called. 　　 How to　implement

interface ISearch {
  name: string;
  age: number;
  groups?: IGroups[];

interface IState {
  searchState:　ISearch;
  text: string,
  display: boolean
}

const Index: FC = () => {
  const [state, setState] = useState<IState>({
    searchState: initialSearch,
    text: '',
    display: boolean
  });

  const onClickGroups = (group: IGroups) => {
    setState({ ...state, searchState: { ...state.searchState, groups: group } });
  };

See What is the best way to add a value to an array in state — Shivam Jha
– Shivam Jha, Commented Oct 13, 2020 at 18:58

mortezashojaei · Accepted Answer · 2020-10-13 20:53:50Z

4

You can use spread JavaScript ES6 (and TypeScript) operation with the current groups and add the new group element in the array:

const onClickGroups = (group: IGroups) => {
  const currentGroups = state.searchState.groups;
  setState({ 
    ...state,  
    searchState: { 
       ...state.searchState,
       groups: [ ...currentGroups, group ]
    }
  });
};

edited Oct 13, 2020 at 20:53

mortezashojaei

4524 silver badges11 bronze badges

answered Oct 13, 2020 at 19:04

LBald

4932 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react I want to add a value to an array of state

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related