How do I create dynamic array in typescript?

Question

I want to create a dynamic array in typescript in the following format

const display = [
    { id: 1, displayName: "Abc1" },
    { id: 2, displayName: "Abc2" },
    { id: 3, displayName: "Abc3" }
]

I have tried the following codes

const [display, SetDisplay] = useState([])

function createData(id: number, name: string) {
    return { id, name };
}

SetDisplay(display.push(createData(1, "Abc1")))

But can not push data into the variable display. Getting error like

Argument of type '{ id: number; result: string; }' is not assignable to parameter of type 'never'.

Any information for resolving this would be helpful.

The second code is for inside of a react component -- is that what you are doing or do you just need simple help with an array in a non-react program? — Lou Franco
– Lou Franco, Commented Dec 22, 2022 at 11:05
Also keep in mind that return value of the push method is not the mutated source but only resulting length of the mutated source. — myf
– myf, Commented Dec 22, 2022 at 11:15

Max G. · Accepted Answer · 2022-12-22 11:10:33Z

5

You should not mutate the state directly.

You can directly do a setState and destructure your previous array to add new data.

You can as well type your setState as follow <{id: number; name:string}>

const [display,setDisplay] = useState<{id: number; name:string}>([]);

function createData(id: number, name: string) {
  setDisplay((prev) => [...prev, { id, name } ]);
}

answered Dec 22, 2022 at 11:10

Max G.

8701 gold badge6 silver badges14 bronze badges

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

Comments

mahooresorkh · Accepted Answer · 2022-12-22 11:12:07Z

0

Add the type to the ‍‍useState:

const [display,SetDisplay] = 
  useState<{id: number,name: string}[]>([]);

edited Dec 22, 2022 at 11:12

mahooresorkh

1,4552 gold badges11 silver badges18 bronze badges

answered Dec 22, 2022 at 11:06

Erik

4853 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do I create dynamic array in typescript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related