Tabbed Pages in React Does not allow me switch between tabs - html

Question

I am trying to make tabs in a react application in which there should be tab A and tab B.
I am doing this in React JS. How do i go about this?
My code is looking like this:
import React from 'react';
import './Dashboard.css';
import 'font-awesome/css/font-awesome.min.css';
import logo2 from './logo2.svg';
import clock from './clock.svg';
const Estimates = () => {
function openPage(pageName,elmnt){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
}
return (
<div className="dashboardHome">
<div className="SideBar">
<div className="logo">
<img src={logo2} className="dashlogo" alt="logo" />
</div>
</div>
<div className="headerArea">
<div>
<p><img src={clock} className="clock" alt="clock" /><font className="headerAreaDir"><h4>Estimating</h4></font></p>
</div>
</div>
<div className="dataArea">
<div>
<input type="text" placeholder="  Search customers by name" className="searchBox" /> <p className="SearchFilterClass">Filter by: <select className="MySelector">
<option>7 Days</option>
<option>14 Days</option>
<option>21 Days</option>
</select></p>
</div>
<button className="estimates_area" onClick={openPage('upcoming_estimates',this)}>Upcoming Estimates</button>
<button onClick={openPage('estimates_sent',this)}>Estimates Sent</button>
<div className="estimates_area">
<div>
<div id="upcoming_estimates" className="">
<h2>upcoming Estimates</h2>
<p>This area is for upcoming estimates</p>
</div>
<div id="estimates_sent" className="">
<h2>Sent Estimates</h2>
<p>This area is for Sent Estimates</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default Estimates;
How do i make this into tabbed pages? Please I need some form of assistance here. I want something like this for instance, I click upcoming_estimates, it shows upcoming_estimates div, and the later. just need some clarification here
Edits
The main code is Looking like this now :
import React from 'react';
import './Dashboard.css';
import 'font-awesome/css/font-awesome.min.css';
import logo2 from './logo2.svg';
import clock from './clock.svg';
const Estimates = () => {
function UpcomingEstimates(){
return(
<div id="upcoming_estimates" className="">
<h2>upcoming Estimates</h2>
<p>This area is for upcoming estimates</p>
</div>
)
}
function EstimatesSent(){
return(
<div id="estimates_sent" className="">
<h2>Sent Estimates</h2>
<p>This area is for Sent Estimates</p>
</div>
)
}
return (
<div className="dashboardHome">
<div className="SideBar">
<div className="logo">
<img src={logo2} className="dashlogo" alt="logo" />
</div>
</div>
<div className="headerArea">
<div>
<p><img src={clock} className="clock" alt="clock" /><font className="headerAreaDir"><h4>Estimating</h4></font></p>
</div>
</div>
<div className="dataArea">
<div>
<input type="text" placeholder="  Search customers by name" className="searchBox" /> <p className="SearchFilterClass">Filter by: <select className="MySelector">
<option>7 Days</option>
<option>14 Days</option>
<option>21 Days</option>
</select></p>
</div>
<div className="estimates_area">
<button href="/UpcomingEstimates" >Upcoming Estimates</button>
<button href="/EstimatesSent">Estimates Sent</button>
</div>
</div>
</div>
)
}
export default Estimates;
Then App.Js is looking like this
import HomePage from './HomePage';
import Register from './Register';
import Dashboard from './DashBoard';
import { BrowserRouter, Route,Switch } from 'react-router-dom';
import Estimates from './Estimates';
function App() {
return (
<BrowserRouter>
<Switch>
<Route path = '/' component={HomePage} exact/>
<Route path = '/register' component={Register} />
<Route path = '/estimates-home' component={Estimates} />
<Route path = '/dashboard' component={Dashboard} />
<Route path="/UpcomingEstimates" component={(props) => ( <UpcomingEstimates /> )} />
<Route path="/estimatesSent" component={(props) => ( <EstimatesSent /> )} />
</Switch>
</BrowserRouter>
);
}
export default App;

Answer 1

Try something like this:
import { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedTab, set] = useState(1);
return (
<>
<div>
Click to select tab!
<div
className={`tab ${selectedTab === 1 && "selected"}`}
onClick={() => set(1)}
>
Tab1
</div>
<div
className={`tab ${selectedTab === 2 && "selected"}`}
onClick={() => set(2)}
>
Tab2
</div>
</div>
<div className="content">Content for Tab {selectedTab}</div>
</>
);
}
See result here: https://75zpi.csb.app/
Codesandbox: https://codesandbox.io/s/75zpi

Answer 2

This way it will work, modify button with href to hit urls, which will call Route, separate out the div code into components, and render them
<button className="estimates_area" href="/UpcomingEstimates" >Upcoming Estimates</button>
<button onClick={} href="/estimatesSent">Estimates Sent</button>
You might want to change href url to,
<button className="estimates_area" href="/estimates-home/UpcomingEstimates" >Upcoming Estimates</button>
<button onClick={} href="/estimates-home/estimatesSent">Estimates Sent</button>
This is separate file, UpcomingEstimates.js
function UpcomingEstimates(){
return(
<div id="upcoming_estimates" className="">
<h2>upcoming Estimates</h2>
<p>This area is for upcoming estimates</p>
</div>
)
}
This is separate file, EstimatesSent.js
function EstimatesSent(){
return(
<div id="estimates_sent" className="">
<h2>Sent Estimates</h2>
<p>This area is for Sent Estimates</p>
</div>
)
}
this shows few router changes, in App.js, import both EstimatesSent and UpcomingEstimates,
<Route path = '/estimates-home' component={Estimates} >
<Route path="/UpcomingEstimates" component={(props) => ( <UpcomingEstimates /> )} />
<Route path="/estimatesSent" component={(props) => ( <EstimatesSent /> )} />
</Route>