https://codesandbox.io/s/simple-line-chart-forked-h39zlx?file=/src/App.tsx I wanted to load each main tab components from the loaded landing component above link. on click of the 3 tabs under overview, the overview component should replace with clicked tab's component and the main tab should active. please see codesandbox full code & help
const [active, setActive] = useState("tab1")
const isActive = (key) => (active === key ? 'active' : '');
<a to="" className={`btn btn-link ${active === "tab1"? "active":""}`} onClick={() => setActive("tab1")} >Overview</a>
<a to="" className={`btn btn-link ${active === "tab2"? "active":""}`} onClick={() => setActive("tab2")} > Align & Ratio</a>
<a to="" className={`btn btn-link ${active === "tab3"? "active":""}`} onClick={() => setActive("tab3")} > Avatar </a>
<a to="" className={`btn btn-link ${active === "tab4"? "active":""}`} onClick={() => setActive("tab4")} > Tags </a>
{active === "tab1" && <div><OverviewMain title="Overview" /></div>}
{active === "tab2" && <div><AlignandRatio title="AlignandRatio" /></div>}
{active === "tab3" && <div><Avatar title="Avatar"/></div>}
{active === "tab4" && <div><Tags title="Tags"/></div>}
How to load That links under overview by map ? if I have const Tabs=[ { tabname:"tab2", }, { tabname:"tab3", }, { tabname:"tab4", } ]
// Component Overview
function Overview() {
return (
<div>
<hr />
<h1>Overview</h1>
<a onClick={() => setActive("tab2")} className="tab">
Align & Ratio{" "}
</a>
<a onClick={() => setActive("tab3")} className="tab">
Avatar{" "}
</a>
<a onClick={() => setActive("tab4")} className="tab">
Tags{" "}
</a>
</div>
);
}
Try this