This content originally appeared on DEV Community and was authored by Labby
Introduction
In this lab, we will be creating a Tabs component in React that allows users to switch between different content views by clicking on a menu. We will be using the useState() hook to manage the active tab index and the map() method to render the tab menu and content view. By the end of this lab, you will have a better understanding of how to build reusable components in React using state and props.
Tabs
index.htmlandscript.jshave already been provided in the VM. In general, you only need to add code toscript.jsandstyle.css.
To render a tabbed menu and view component, follow these steps:
- Define a
Tabscomponent. Use theuseState()hook to set thebindIndexstate variable todefaultIndex. - Define a
TabItemcomponent and filter thechildrenpassed to theTabscomponent to remove any unnecessary nodes except forTabItem. You can do this by identifying the function's name. - Define a function called
changeTab. This function will be executed when a user clicks a<button>from the menu. -
changeTabexecutes the passed callback,onTabClick, and updatesbindIndexbased on the clicked element. - Use
Array.prototype.map()on the collected nodes to render the menu and view of the tabs. - Use the value of
bindIndexto determine the active tab and apply the correctclassName.
Here is the CSS code to style the tabbed menu and view:
.tab-menu > button {
cursor: pointer;
padding: 8px 16px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
}
.tab-menu > button.focus {
border-bottom: 2px solid #007bef;
}
.tab-menu > button:hover {
border-bottom: 2px solid #007bef;
}
.tab-content {
display: none;
}
.tab-content.selected {
display: block;
}
Here is the JavaScript code to implement the Tabs component:
const TabItem = (props) => <div {...props} />;
const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
const [bindIndex, setBindIndex] = React.useState(defaultIndex);
const changeTab = (newIndex) => {
if (typeof onTabClick === "function") onTabClick(newIndex);
setBindIndex(newIndex);
};
const items = children.filter((item) => item.type.name === "TabItem");
return (
<div className="wrapper">
<div className="tab-menu">
{items.map(({ props: { index, label } }) => (
<button
key={`tab-btn-${index}`}
onClick={() => changeTab(index)}
className={bindIndex === index ? "focus" : ""}
>
{label}
</button>
))}
</div>
<div className="tab-view">
{items.map(({ props }) => (
<div
{...props}
className={`tab-content ${
bindIndex === props.index ? "selected" : ""
}`}
key={`tab-content-${props.index}`}
/>
))}
</div>
</div>
);
};
Finally, here is an example of how to use the Tabs component:
ReactDOM.createRoot(document.getElementById("root")).render(
<Tabs defaultIndex={1} onTabClick={console.log}>
<TabItem label="A" index={1}>
Lorem ipsum
</TabItem>
<TabItem label="B" index={2}>
Dolor sit amet
</TabItem>
</Tabs>
);
Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.
Summary
Congratulations! You have completed the Tabs lab. You can practice more labs in LabEx to improve your skills.
🚀 Practice Now: Building Reusable React Tabs Component
Want to Learn More?
- 🌳 Learn the latest React Skill Trees
- đź“– Read More React Tutorials
- đź’¬ Join our Discord or tweet us @WeAreLabEx
This content originally appeared on DEV Community and was authored by Labby
Labby | Sciencx (2024-09-14T20:59:35+00:00) React Tabs Component | Reusable UI | Interactive Web Development. Retrieved from https://www.scien.cx/2024/09/14/react-tabs-component-reusable-ui-interactive-web-development/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.