Eat and Split App.

Today, I'm going to add some interactivity to this app.

The code below represents a static presentation of a React application designed for a bill-splitting feature among friends. It provides a structure with components like FriendList, Friend, Button, FormAddFriend, and FormSplitBill, but lacks the interactive features that would handle user inputs, form submissions, and dynamic updates. The components serve as placeholders for future implementation of interactive functionalities such as adding friends and splitting bills.👇👇👇

App Component:

• The parent component of the application.👇

FriendList Component:

• Displays a list of friends using the data from the initialFriends array.

• Maps over the initialFriends array and renders a Friend component for each friend.👇👇

Friend Component:

• Displays details of a friend, including their name, image, and balance.

• Conditionally renders a message based on whether the friend owes money, is owed money, or is even.

• Includes a "Select" button.👇👇

Button Component:

• A reusable button component that can be used with different labels (children) and

FormAddFriend Component:

• A form for adding a new friend.

• Includes input fields for the friend's name and image URL.

• Includes an "Add" button.👇👇

FormSplitBill Component:

• A form for splitting a bill.

• Includes input fields for the bill value, your expense, and a disabled input for the friend's expense .

• A dropdown to select who paid (either "You" or "Friend").👇👇

Show form to add a friend

A simple interactivity is implemented to display the form for adding a friend when isOpen is true.

Additionally, there are some modifications made to the reusable Button component.

Now, when the 'Add Friend' button is clicked, it shows the form to add a friend

To be continued, as there are ongoing power issues😢