🍕 Eat-N-Split Day 2: Adding Friends & Toggling the Form

#react #javascript #frontend #100daysofcode

Today I continued my Eat-N-Split course project in React — and it was a fun one!
I worked on opening/closing the Add Friend form and rendering newly added friends dynamically.

🎯 What I Focused On Today

The main goal of Day 2 was:

Show and hide the “Add Friend” form when the user clicks a button.
Add a new friend to the list and update the UI instantly.

This is a perfect example of React state in action.

🧩 Opening & Closing the Form

I used a simple boolean state to toggle the form visibility:

const [friendFormIsOpen, setFriendFormIsOpen] = useState(false);

And a button that flips it:

<Button onClick={() => setFriendFormIsOpen(show => !show)}>
  {friendFormIsOpen ? "Close" : "Add Friend"}
</Button>

💡 Fun thing: This tiny little line of code lets you open and close the form with one button. No rocket science, just React magic. ✨

🧑‍🤝‍🧑 Adding a Friend

When a new friend is submitted:

A new friend object is created with a unique ID, name, image, and a default balance.
Then I update the friends state:

setFriends(friends => [...friends, newFriend]);

The cool part? React instantly re-renders the UI with the new friend without refreshing the page. 🪄

😂 What I Learned Today (With a Smile)

useState is your best friend — literally!
Toggling things with a boolean is satisfying. Flip → show, Flip → hide.
Adding items to an array in React is as simple as spreading the old array and adding the new item.
Watching the new friend appear on the list feels like magic every time. ✨