React hook set array from api directly to state

Question

How can I set an array which I get from an api directly to a hook. The api returns a complete array not pieces.

If I do it this way:

  const [favorites, setFavorites] = useState(['']);

  const { data } = await axios.get(url, { headers });
  setFavorites(favorites => [...favorites, data.favorites]);

I get this output which is not correct:

(2) ["", Array(2)]
0: ""
1: (2) ["5ea42eae8750131824a5728f", "5ea5d29230778c1cd47e02dd"]
length: 2
__proto__: Array(0)

I do not want to have an array inside the array.

Mark Partola · Accepted Answer · 2020-05-06 12:29:04Z

2

If data.favorites is an array as well you have to use spread in this case too.

setFavorites(favorites => [...favorites, ...data.favorites]);

answered May 6, 2020 at 12:29

Mark Partola

6643 silver badges10 bronze badges

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

2 Comments

user13262487 Over a year ago

This seems to work but the first array entry is empty '', how can I prevent that?

user13262487 Over a year ago

It starts filling at array positon [1] not [0]

gqstav · Accepted Answer · 2020-05-06 12:29:22Z

1

Have you tried this:

const [favorites, setFavorites] = useState(['']);

const { data } = await axios.get(url, { headers });
setFavorites(favorites => [...favorites, ...data.favorites]);

answered May 6, 2020 at 12:29

gqstav

2,0921 gold badge15 silver badges18 bronze badges

2 Comments

user13262487 Over a year ago

This seems to work but the first array entry is empty '', how can I prevent that?

user13262487 Over a year ago

It starts filling at array positon [1] not [0]

Collectives™ on Stack Overflow

React hook set array from api directly to state

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