React Tabs Component

Hey devs! 👋

I've decided to start a small habit:
Each day, I’ll build a simple React task—just to revisit the main concepts and also explore what’s new in React 19.

I’ll be sharing my daily learnings here in case anyone finds them helpful (or wants to join me on this React refresh ride 🚀).

📌 Task 1: Tabs Component

I started with something simple but practical—a Tabs component.
It displays either a person's info or their address, and I can switch between them by clicking on the corresponding tab.

💡 The Core Concept: useState

The most important concept I used today is useState.
This hook lets us add state to functional components without needing class components.

✍️ Syntax:
const [state, setState] = useState(initialValue);

• state: holds the current value
• setState: updates the state
• initialValue: the initial value assigned

🧠 How I Used It:

const [open, setOpen] = useState(true);

• If open is true → the Person tab is active
• If false → the Address tab is shown

I used a ternary condition to decide which component to render based on the state, and I toggled between tabs using onClick events.

💻 Code Preview

Here’s a snippet of the component:

`const Tabs = () => {
const [open, setOpen] = useState(true);

return (

• setOpen(true)}>Person
• setOpen(false)}>Address

  {open ? (
    <div>
      <p>Name: John Doe</p>
      <p>Age: 32</p>
      <p>Occupation: Developer</p>
    </div>
  ) : (
    <div>
      <p>Street: 1234 Main St</p>
      <p>City: San Francisco</p>
      <p>State: CA</p>
      <p>Zip: 94107</p>
    </div>
  )}
</div>

);
};
`

You can of course style it more with styled-components, which I used in my full version!

🧠 Lessons Learned:

useState is super handy and clean for toggling UI elements.
Keeping state simple makes conditional rendering straightforward.
Even basic tasks like this are a great way to reinforce React muscle memory 💪

👀 What’s Next?

Next up: I’ll explore other hooks (useEffect, useRef), maybe dive into the experimental features in React 19, and build out more useful UI patterns.

If you’d like to follow along or share tips, feel free to connect!
Let’s grow together 🌱