0

I am using functional components instead of class-based components. I have a state of hikes that is an array of objects and whenever I want to add a new hike to that array, I invoke the following line:

setCoors((coors=> [...coors, newCoor]))

But I also NEED to have the state callback function implemented. This is what Ive tried and it "sort of" works.

setCoors({coors:[...coors, newCoor]}, ()=>{console.log(coors)} )

But this is what I get back:

{
   coors:[
      0: {lat: 37.00, lng: -100.12},
      1: {lat: 88.00, lng: 76.12},
   ]
}

But i dont want my coor state to be an object...I need it to be an array like this:

{
   [
      0: {lat: 37.00, lng: -100.12},
      1: {lat: 88.00, lng: 76.12},
   ]
}

I can probably destructure the object to get what i want but I wanna know if there is an actual solution to this with setState. Does anyone have an idea of achieving this while also implementing a callback function? Thank you in advance

benwl
  • 366
  • 2
  • 17
  • can u mention Incoming coors value and intialized state type – dinesh oz Apr 15 '22 at 05:40
  • Just change `setCoors({ coors: [...coors, newCoor]},...)` to `setCoors([...coors, newCoor],...)` like your did in your first example. – fast-reflexes Apr 15 '22 at 05:43
  • 3
    The [`useState` setter function](https://reactjs.org/docs/hooks-reference.html#usestate) doesn't have a second callback argument, though there are [alternatives](https://stackoverflow.com/q/54954091/1218980). – Emile Bergeron Apr 15 '22 at 05:48
  • Also note that the syntax of your state examples is invalid. – Emile Bergeron Apr 15 '22 at 05:49
  • 1
    Does this answer your question? [How to use \`setState\` callback on react hooks](https://stackoverflow.com/questions/56247433/how-to-use-setstate-callback-on-react-hooks) – Emile Bergeron Apr 15 '22 at 05:52
  • How is the syntax invalid except the extra callback? I mean it accomplishes the wrong thing in the second example but how is the syntax wrong? – fast-reflexes Apr 15 '22 at 05:55
  • @fast-reflexes I'm talking about the _state_ examples, not the `setCoors` calls. – Emile Bergeron Apr 15 '22 at 05:58
  • Aha, I assume those are just printouts from some console that numbers array entries ... But if not, yes you're right. – fast-reflexes Apr 15 '22 at 06:00
  • @dineshoz coors is just an object with lat, lng eg { lat: 100, lng: -50} – benwl Apr 15 '22 at 08:13
  • @EmileBergeron thank you, but not that answer you are referring to also sets the value to a property of the state. – benwl Apr 15 '22 at 08:15
  • @fast-reflexes I tried changing it to `setCoors([...coors, newCoor],...)` like you mentioned but it throws a syntax error – benwl Apr 15 '22 at 08:17
  • Set it to exactly `setCoors([...coors, newCoor])`. The trailing `,...)` is meant to reference your added callback at the end and should not be taken literally. But the callback is not officially documented so don't know if that works... But try to add it afterwards... – fast-reflexes Apr 15 '22 at 08:32
  • @fast-reflexes yea i tried `setCoors([...coors, newCoor], ()=>{console.log(coors)} )` but it doesnt work...im just using useEffect to get by...maybe that is the intended "React way" to achieve what i want? im not too sure. – benwl Apr 15 '22 at 09:24
  • Are you saying that `setCoors({coors:[...coors, newCoor]}, ()=>{console.log(coors)} )` works but without the intended outcome but `setCoors([...coors, newCoor], ()=>{console.log(coors)} )` does not? Then it's really odd. But I wouldn't use this two-argument version of `setState` because it's not even documented so even if you say that it works in your first example, it's not bound to stay that way. If you describe your usecase I'm SURE we could come up with something better; there are many ways to do things in React but you gotta do it the React way :) – fast-reflexes Apr 15 '22 at 09:56
  • 1
    You already have the proper way to set the state: `setCoors((coors=> [...coors, newCoor]))` is fine, there's just no callback like in class components. You have to use `useEffect`, just like explained in every answers of the [link I shared](https://stackoverflow.com/a/56247483/1218980). – Emile Bergeron Apr 15 '22 at 16:29

0 Answers0