Need help with React split expenses project

Hi I’m making a split expenses app which split expenses between “You” and your friend. So far I’m able to add friend and expenses, edit expenses and delete expenses. I’m trying to add logic to now split expenses and show if my friends are owed or owe me right beside their name.

For this I have created a splitExpenses method in the AppDashboard component which acts as an ancestor to all other components. For some weird reason, when I use the splitExpenses method, all the user and expense gets jumbled up. To reproduce the issue, add a couple of user and a few expenses to each of the user.
I can’t figure out why it’s happening and so reaching out to this amazing community.

Thanks in advance!

I’m slightly concerned about the UX of your app… Like, no one will add names to split the bill, do you realise this?

Your app has to have 3 crystal clear steps:

  1. What’s the bill amount?
  2. What’s the tip (percentage or amount)?
  3. Split between how many people?

That’s it. This app doesn’t need to know my name… If that’s too easy for your skill level, instead of unnecessary CRUD and user profile, try to build this app in React Native or Flutter, so you can eventually add access to device’s camera functionality and basic OCR that will be able to parse bill amount from photo.

Thank you for your reply.
so I’m trying to replicate the split-wise app and this is just the start. For now I am only trying to make the app work between 2 people. Once I’m able to successfully split expenses between 2, I’ll go for multiple persons and many more features. This is sort of an MVP.

I’ve not used Native/Redux/Flutter for a simple reason that I’ve recently started learning React and wants to delve more into plain react without adding more baggage at this point.