I am building a Tabs component in React JS. I want to create a loop for my code, instead of hardcoding every tab(title, content). The code is working I need to simplify the code with a loop.
Tabs Component
import { useState } from "react"
import "./TabsStyles.css"
const Tabs = () => {
const [toggleTabsNumber, setToggleTabsNumber] = useState(null)
const togglerFunction = (index) => {
setToggleTabsNumber(index)
}
return (
<div>
<div className="c-tabs-main-container">
<div className="c-tabs-title-container">
<h3 onClick={() => togglerFunction(1)}>Tab 01</h3>
<h3 onClick={() => togglerFunction(2)}>Tab 02</h3>
<h3 onClick={() => togglerFunction(3)}>Tab 03</h3>
</div>
<div className="c-tabs-content-container">
<p className={toggleTabsNumber === 1 ? "c-active" : ""}>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut similique asperiores nihil ullam non ad, dolorem quam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?</p>
<p className={toggleTabsNumber === 2 ? "c-active" : ""}>Qquam eligendi rem praesentium nemo sed error pariatur voluptates hic voluptatem aliquam sapiente unde?</p>
<p className={toggleTabsNumber === 3 ? "c-active" : ""}>PPhic voluptatem aliquam sapiente unde?</p>
</div>
</div>
</div>
)
}
export default Tabs
