2024-05-09
3796
#react
Chinedu Imoh
59752
May 9, 2024 ⋅ 13 min read

How to build a tab component in React

Chinedu Imoh Chinedu is a tech enthusiast focused on full-stack JavaScript and Infrastructure engineering.

Recent posts:

A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 ⋅ 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 ⋅ 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 ⋅ 10 min read
Deploying Next.js apps with Deno Deploy

Deploying Next.js apps with Deno Deploy

For those just getting started with deploying their first application, Deno Deploy’s simplicity might be exactly what you need; no complex configuration files to wrestle with or cloud concepts to master before getting your app live.

Emmanuel Odioko
Feb 6, 2025 ⋅ 5 min read
View all posts

6 Replies to "How to build a tab component in React"

  1. Great tutorial! I’m trying to figure out how to add a third tab. Based on `{activeTab === “tab1” ? : }` I’m guessing this isn’t possible?

  2. While this works, I’d consider using:
    – nav with a in it (no li links, semantic)
    – role and aria-* tags (screen readers)
    – useTabs hook (headless components)

    apologies if I missed one of the above while flying over it like the “veccino” (great Netflix series) and thx 4 the efforts

Leave a Reply