0

I am working on an application which tracks your debts. I made an array which has all the information stored about each person and their owes. When I try to add a new debt (owe) my Alert that I use for debugging in React Native shows exactly the array I wanted to achieve, but I still get an error. Do you have any ideas how I can fix it? I'd appreciate any kind of help.

My Array:

const [owes, setOwes] = useState([
    {
      id: 1,
      name: "Frank",
      pic: require("../assets/blank_pic.png"),
      owes: [
        {
          id: 2,
          desc: "Cup of coffee",
          amount: -5.75,
          date: "15/07/18",
          time: "15:00",
        },
      ],
    },
    {
      id: 2,
      name: "Elizabeth",
      pic: require("../assets/blank_pic.png"),
      owes: [
        {
          id: 3,
          desc: "TV",
          amount: 50,
          date: "17/08/17",
          time: "12:05",
        },
      ],
    },
   ])

It's not the complete array... but it shows how it's structured.

My code:

const addOwe = (owe) => {
    owe.id = uuid.v4();
    owe.date = "15/07/18";
    owe.time = "16:00";
    setOwes((prevOwes) => {
      prevOwes.map((person) => {
        if (person.name === owe.name) {
          person.owes = [...person.owes, owe];
          Alert.alert("Array", JSON.stringify(prevOwes));
          return prevOwes;
        }
      });
    });
    props.setModalOpen(false);
  };

Error:

TypeError: undefined is not an object (evaluating 'owes.map')
Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Kirill Inoz
  • 1
  • `return prevOwes.map(...)` or remove `{}` like `prevOwes => prevOwes.map(...)` – Yury Tarabanko Sep 01 '20 at 18:11
  • `person.owes = [...person.owes, owe]` mutates the current state, [which is an anti-pattern in React.](https://stackoverflow.com/q/37755997/1218980) Then, your updater function passed to `setOwes` returns nothing. – Emile Bergeron Sep 01 '20 at 18:12
  • You're halfway to the [right way to update an array in the state](https://stackoverflow.com/q/43040721/1218980), you just need to [ensure you're returning the full state, with all the other nested properties.](https://stackoverflow.com/q/57571525/1218980) – Emile Bergeron Sep 01 '20 at 18:18
  • Should you not have a setState hook in addOwes? – FujiRoyale Sep 01 '20 at 18:24
  • 1
    @FujiRoyale looks like `addOwe` is just a callback in the same component that has the `useState` hook shown above. – Emile Bergeron Sep 01 '20 at 18:28
  • 1
    @YuryTarabanko Thanks for your answer but it didn't work out. Now it says `TypeError: undefined is not an object (evaluating 'person.owes.map')` @EmileBergeron I'm going to look at the posts you suggested and you are right about `addOwe` being just a callback and the component has a `useState` hook. – Kirill Inoz Sep 01 '20 at 18:55
  • 1
    @KirillInoz It didn't work out because you have further errors in your code. Your mapper function either returning entire array `prevOwes` or `undefined` instead of updated version of original person object. – Yury Tarabanko Sep 01 '20 at 20:10

0 Answers0