Build React.js Material-UI Multiple Tabs Layout Component Using Array of Objects in JSX & Javascript

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

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>
  );
}

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 (

<Route

path="/"

render={(history) => (

<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>

</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

import React from "react";

export default function () {
  return <h1 style={{ marginTop: "10vh" }}>All Books</h1>;
}

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

import React from "react";

export default function () {
  return <h1 style={{ marginTop: "10vh" }}>All Favorites</h1>;
}

import React from "react";

export default function () {

return <h1 style={{ marginTop: "10vh" }}>All Favorites</h1>;

}