How to add item to immutable array in React setState in Typescript?

Question

I want to use an immutable array to handle the state. And add an item to this list.

interface MainState {
  list: readonly []; // define immutable array
}

const Component: React.FC = () => {
  // by default use the immutable array with type
  const [classes, setClasses] = useState({ list: [] } as MainState);

  useEffect(() => {
    if (data) {
      data.forEach((thing) => {
        setClasses(prevState => {
          //
          // Call signature return types '{ list: never[]; }' and 'MainState' are incompatible.
          // The types of 'list.length' are incompatible between these types.
          // Type 'number' is not assignable to type '0'.  TS2345
          //
          const list = prevState.list.concat(thing);
          return { list };
        });
      });
    }
  });
// ...

}

I though using concat would work, since it returns a new array.

Sagi Rika · Accepted Answer · 2020-02-17 07:24:40Z

4

The easiest, most acceptable way of doing so:

const list = [...prevState.list, thing];

answered Feb 17, 2020 at 7:24

Sagi Rika

2,9993 gold badges17 silver badges35 bronze badges

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

2 Comments

Remi Over a year ago

I see. I am stil receiving the following error:

Argument of type '(prevState: MainState) => any[]' is not assignable to parameter of type 'SetStateAction<MainState>. Type '(prevState:MainState) => any[]' is not assignable to type '(prevState: MainState) => MainState'. Property 'list' is missing in type 'any[]' but required in type MainState

Remi Over a year ago

Then this will solve part of the problem: setClasses((prevState): MainState => ({ list: [...prevState.list, CLASS] }));. But then on the list in the return of the arrow function I am again receiving the Type 'number' is not assignable to type '0'.

udalmik · Accepted Answer · 2020-02-17 07:49:35Z

1

From the doc you provided:

The concat() method is used to merge two or more arrays

So you need to pass array, not element to this function, I suppose this will work:

const list = prevState.list.concat([thing]);

Also I see your code is iterating through new array and pass elements one by one, why don't you concat the whole array?

    if (data) {
        setClasses(prevState => {
          const list = prevState.list.concat(data);
          // or list = [...prevState.list, ...data];
          return { list };
        });
    }

Also I think you missed type of array in you MainState, at least update it with any type, here is full example for number type:

interface MainState {
  list: readonly number[];
}

const data = [1, 2, 3]

const Component: React.FC = () => {

  const [classes, setClasses] = useState({ list: [] } as MainState);

  useEffect(() => {
    if (data) {
      setClasses(prevState => ({ list: [...prevState.list, ...data]}));
    }
  });

  return <div>{classes}</div>
}

edited Feb 17, 2020 at 7:49

answered Feb 17, 2020 at 7:30

udalmik

8,02829 silver badges42 bronze badges

2 Comments

Remi Over a year ago

Receive on the return { list }; the message:

Type 'never[]' is not assignable tot type 'readonly[]'. Types of property 'length' are incompatible. Type 'number' is not assignable to type '0'.

udalmik Over a year ago

Updated answer, there was no type of array in your state definition

Collectives™ on Stack Overflow

How to add item to immutable array in React setState in Typescript?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related