How to set data in react typescript array of object from axios response

Question

I am using react with typescript I am trying to fetch the data from the API using Axios. I created a state of an array of objects and tried to set the data from the response in Axios then:

const [users, setUsers] = useState<Users[]>([]);

type Users = {
    userId: number,
    name: string,
}

useEffect(() => {

const response = async () => {
        await axios.get(
          "https://localhost:5000/users",{
            headers: { "Content-Type": "application/json" },
          }
        );
      }

 response().then((res) => {
        setUsers({userId: res.userId, name: res.name})
      })


},[])

I am getting on setUsers saying: Argument of type '{ userId: any; }' is not assignable to parameter of type 'SetStateAction<Users[]>'. Object literal may only specify known properties, and 'userId' does not exist in type 'SetStateAction<Users[]>

Does this answer your question? How to add to state array in React — k.tten
– k.tten, Commented May 23, 2022 at 20:06

k.tten · Accepted Answer · 2022-05-23 20:05:20Z

1

You need to append it to the last state:

response().then((res) => {
    setUsers((prevUsers) => prevUsers.concat(res));
    // setUsers((prevUsers) => [...prevUsers, res]); // another way
});

TypeScript is complaining because you are giving users a single Users object and not an array.

answered May 23, 2022 at 20:05

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

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

1 Comment

Saghar Francis Over a year ago

still complaining: Type 'void' is not assignable to type 'Users'

Collectives™ on Stack Overflow

How to set data in react typescript array of object from axios response

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related