React Typescript. Issues populating an array state with an object

Question

I have the following object.

const data = [
    {
        key: '1',
        name: 'John Brown',
        date: 'Mon Oct 31 2013 00:00:00 GMT-0700 (PDT)',
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Joe Black',
        date: 'Mon Oct 31 2014 00:00:00 GMT-0700 (PDT)',
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Jim Green',
        date: 'Mon Oct 31 2011 00:00:00 GMT-0700 (PDT)',
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Jim Red',
        date: 'Mon Oct 31 2010 00:00:00 GMT-0700 (PDT)',
        address: 'London No. 2 Lake Park',
    },
];

And this state

const [usersData, setUsersData] = React.useState([]);

I'm trying to setup its data with an useEffect on component mount.

React.useEffect(() => {

        setUsersData(result => [...result, data[0]])
        props.setLoading(false);
    }, []);

But im having an issue with the setUsersData

Argument of type '(result: never[]) => { key: string; name: string; date: string; address: string; }[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type '(result: never[]) => { key: string; name: string; date: string; address: string; }[]' is not assignable to type '(prevState: never[]) => never[]'. Type '{ key: string; name: string; date: string; address: string; }[]' is not assignable to type 'never[]'. Type '{ key: string; name: string; date: string; address: string; }' is not assignable to type 'never'.ts

UPDATE:

This is what I have currently.

const data = .... is still the same

I changed the useState to

const [usersData, setUsersData] = React.useState<any[]>([]);

And I do this now

React.useEffect(() => {
        setUsersData(result => [...result, data[0]])
        props.setLoading(false);
    }, []);

But this way it only adds the elemtn 0 to my array, and Im trying to add all the elements contained in data

@WilliamWang well yea i can do that ,but its the same Argument of type 'any[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type 'any[]' is not assignable to type 'never[]'. Type 'any' is not assignable to type 'never'. — mouchin777
– mouchin777, Commented Nov 6, 2020 at 13:24
since you are using typescript, try const [usersData, setUsersData] = React.useState<any[]>([]); — topdev87
– topdev87, Commented Nov 6, 2020 at 13:25
I am confused as to why you are setting state like this setUsersData(result => [...result, data[0]]). What are you trying to add to the state? — yudhiesh
– yudhiesh, Commented Nov 6, 2020 at 13:30

Алексей Мартинкевич · Accepted Answer · 2020-11-06 13:38:25Z

3

const [usersData, setUsersData] = React.useState([]);

Issue here is that typescript infer type of [] as never[] which means empty array. So to fix issue you have to specify type providing generic argument to useState:

type Item = {
    key: string,
    name: string,
    date: string,
    address: string,
}

// It will work even without specifying type here 
const data: Item[] = {
  //
}

const [usersData, setUsersData] = React.useState<Item[]>([]);

Providing type for useState says to typescript that this array of Item's event if it's empty for now.

answered Nov 6, 2020 at 13:38

Алексей Мартинкевич

2,1009 silver badges7 bronze badges

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

2 Comments

mouchin777 Over a year ago

And after this, how do I use, setUsersData ? , since this setUsersData(result => [...result, data]) fails

Алексей Мартинкевич Over a year ago

setUsersData(result => [...result, data[0]]) or setUsersData(data) or setUsersData(result => [...result, ...data])

topdev87 · Accepted Answer · 2020-11-06 13:43:09Z

2

Since you are using typescript, you should do the type definition or simply any

try const [usersData, setUsersData] = React.useState<any[]>([]);

React.useEffect(() => {
        setUsersData(result => [...result, ...data])
        props.setLoading(false);
}, []);

answered Nov 6, 2020 at 13:43

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Collectives™ on Stack Overflow

React Typescript. Issues populating an array state with an object

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related