Simple tabs in ReactJS using components - reactjs

Question

I am new to React.js, I know basic stuff like state, components, but I need to:
Create a MyTabsComponent to be used like this:
<MyTabsComponent>
<div title={"Section title 1"}>Content of section 1</div>
<div title={"Section title 2"}>Content of section 2</div>
<div title={"Section title 3"}>Content of section 2</div>
<div title={"Section title 4"}>Content of section 2</div>
<div title={"Section title 5"}>Content of section 2</div>
.
.
.
.
.and so on..............
.
.
.
.
.
</MyTabsComponent>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
See visual
The above code should render like this:
<div class="tabs">
<button class="btn-active">Section title 1</button>
<button class="btn">Section title 2</button>
<button class="btn">Section title 3</button>
<button class="btn">Section title 4</button>
<!--
.
.
.
.
.
.
and so on..........
-->
<div class="view">
Content of section 1
</div>
</div>
What I've tried:
import React,{useState} from "react";
const MyTabsComponent = () => {
const [title,setTitle] = useState(['Section 1','Section 2','Section 3']);
const [ct,setCt] = useState(null);
return (
<div className="tabs">
<TabButtons tabName={title} tabCt={setCt} />
<div class="view">
Content : {ct}
</div>
</div>
);
};
const TabButtons = (props) => {
return (
<>
{
props.tabName.map((item,i)=>
<button onClick={()=>props.tabCt(i)} className="btn">{item}</button>
)
}
</>
);
};
export default MyTabsComponent;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I don't know how to do this for any number of tabs. Rest I can handle-- CSS, onClick events I understand well, as I know JS well.
EDIT: I found an article on Compound Components https://blog.logrocket.com/understanding-react-compound-components/
and they say:
import React, { useState, createContext, useContext } from "react";
//the name of this context will be DataContext
const DataContext = createContext({});
function Tab({ id, children }) {
//extract the 'setActiveTabID` method from the DataContext state.
const [, setActiveTabID] = useContext(DataContext);
return (
<div>
<div onClick={() => setActiveTabID(id)}>{children}</div>
</div>
);
}
function TabPanel({ whenActive, children }) {
//get the 'activeTabID' state from DataContext.
const [activeTabID] = useContext(DataContext);
return <div>{activeTabID === whenActive ? children : null}</div>;
}
function TabSwitcher(props) {
const [activeTabID, setActiveTabID] = useState("a");
//since this component will provide data to the child components, we will use DataContext.Provider
return (
<DataContext.Provider value={[activeTabID, setActiveTabID]}>
{props.children}
</DataContext.Provider>
);
}
export default TabSwitcher;
export { Tab, TabPanel };
And to use:
import TabSwitcher, { Tab, TabPanel } from "./TabSwitcher";
function App() {
return (
<div className="App">
<h1>TabSwitcher with Compound Components</h1>
<TabSwitcher>
<Tab id="a">
<button>a</button>
</Tab>
<Tab id="b">
<button>b</button>
</Tab>
<TabPanel whenActive="a">
<div>a panel</div>
</TabPanel>
<TabPanel whenActive="b">
<div>b panel</div>
</TabPanel>
</TabSwitcher>
</div>
);
}
export default App;
The problem is: they are using
TabPanel
as a container whereas I want a <div>

Answer 1

UPDATED
Here is the latest implementation for you
function TabController({ children }) {
if (!children || children.length === 0) {
return null
}
const [currentTab, setCurrentTab] = React.useState(children[0])
return (
<>
{children.map((child) => (
<button key={child.title} onClick={() => setCurrentTab(child)}>
{child.props.title}
</button>
))}
<div className="view">{currentTab.props.children}</div>
</>
)
}
This is how we use it
<TabController>
<div title={'Section title 1'}>Content of section 1</div>
<div title={'Section title 2'}>Content of section 2</div>
<div title={'Section title 3'}>Content of section 3</div>
<div title={'Section title 4'}>Content of section 4</div>
<div title={'Section title 5'}>Content of section 5</div>
</TabController>
OLD ANSWER
I tried to create a simple component for you. You can implement actual data for TAB_DATA and pass it into your MyTabsComponent as props
//I mocked TAB_DATA here for testing purpose
const TAB_DATA = [
{
title: 'Section 1',
content: 'Content 1',
},
{
title: 'Section 2',
content: 'Content 2',
},
{
title: 'Section 3',
content: 'Content 3',
},
]
const MyTabsComponent = () => {
const [ct, setCt] = useState(TAB_DATA[0].content) //set the first tab data as default
return (
<div className="tabs">
{TAB_DATA.map((tab) => (
<button
onClick={() => {
setCt(tab.content)
}}
>
{tab.title}
</button>
))}
<div className="view">{ct}</div>
</div>
)
}

Answer 2

If you want to create a component that has nested elements of an unknown number or type, then you need to make use of the children prop. This is not something you have to define, but represents the child elements of the component when it is called.
Simply nest any number of components or elements between your component tags, and in MyTabsComponent pull out the props and put the props.children inside your return statement where you'd like them to go.
For your example, I have elevated the state ct and title to the parent component of MyTabsComponent, and given that state directly to the rendered buttons. I also pass the ct to the MyTabsComponent so it can display its content.
MyTabsComponent
const MyTabsComponent = (props) => {
return (
<div className="tabs">
{props.children}
<div class="view">
Content : {props.ct}
</div>
</div>
);
};
The parent of MyTabsComponent
import React, { useState } from 'react'
const Main = () => {
const [title, setTitle] = useState(['Section 1','Section 2','Section 3']);
const [ct, setCt] = useState(null);
return (
<MyTabsComponent ct={ct}>
{title.map((item, i) =>
<button onClick={() => setCt(i)} className="btn">{item}</button>
)}
</MyTabsComponent>
)
}