Welcome folks today in this blog post we will be displaying the multiple tabs layout
component using array of objects
in jsx and react.js using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new react.js
project using the below command
npx create-react-app sampleapp
cd sampleapp
And after that you will see the below directory
structure of react.js app as shown below
Now we need to edit the App.js
file as shown below
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import React from "react"; import "./styles.css"; import { Tabs, Tab, AppBar } from "@material-ui/core"; import { Route, BrowserRouter, Switch, Link } from "react-router-dom"; import Books from "./Books"; import Favorites from "./Favorites"; export default function App() { const routes = ["/books", "/favorites"]; return ( <div className="App"> <BrowserRouter> <Route path="/" render={(history) => ( <AppBar> <Tabs value={ history.location.pathname !== "/" ? history.location.pathname : false } > {console.log(history.location.pathname)} <Tab value={routes[0]} label="books" component={Link} to={routes[0]} /> <Tab value={routes[1]} label="Favorites" component={Link} to={routes[1]} /> </Tabs> </AppBar> )} /> <Switch> <Route path="/books" component={Books} /> <Route path="/favorites" component={Favorites} /> </Switch> </BrowserRouter> </div> ); } |
As you can see we are using the react-router
to have some navigation links inside the tabs
as you can see. Now we need to define the content
of each tab as shown below
Now we need to create the Books.js
file and copy paste the following code
Books.js
1 2 3 4 5 |
import React from "react"; export default function () { return <h1 style={{ marginTop: "10vh" }}>All Books</h1>; } |
Now we need to create the Favourites.js
file and copy paste the following code
Favourites.js
1 2 3 4 5 |
import React from "react"; export default function () { return <h1 style={{ marginTop: "10vh" }}>All Favorites</h1>; } |