This content originally appeared on DEV Community and was authored by Usama
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. ✨
🔮 Next Steps
Tomorrow (or next session), I’ll focus on:
- Splitting a bill with a selected friend
- Handling the calculation of balances dynamically
- Making the app fully interactive
This content originally appeared on DEV Community and was authored by Usama
Usama | Sciencx (2025-11-17T18:43:49+00:00) 🍕 Eat-N-Split Day 2: Adding Friends & Toggling the Form. Retrieved from https://www.scien.cx/2025/11/17/%f0%9f%8d%95-eat-n-split-day-2-adding-friends-toggling-the-form/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.