making tabs in react for two different pages

Question

I'm trying to make tabs in reactjs but couldn't do it

what I want is to have tabs between sign-in and signup pages

both of the pages have a separate component

I know that I'm missing something but not sure where it is

here is my code

import React, { useState } from "react";
import Login from "./Login";
import SignUp from "./SignUp";

const Tabs = () => {
  const [login, setLogin] = useState(true);
  const [signup, setSignUp] = useState(true);

  const handleLogin = () => {
    setLogin(true);
    setSignUp(false);
  };

  return (
    <>
      <div className="tabs">
        <button onClick={() => setLogin(true)}> Üyelik Girişi</button>
        <button onClick={() => setLogin(false)}>Yeni Uyelik</button>
        {signup && <SignUp />}
        {/* {login && <Login />} */}
      </div>
    </>
  );
};

export default Tabs;

So, what I can't figure out is how to direct the function to the desired page

Your question is unclear, please add more code or codepen. – yanir midler Aug 30 '22 at 12:43 — yanir midler, Aug 30 '22 at 12:43

score 1 · Answer 1 · answered Aug 30 '22 at 12:47

1

Your question is a little bit absolute but lemme answer as much as I can.

I think you are using react-router and You can use react-router useNavigate hook.

it will look like

const navigate = useNavigate();
const handleLogin = ()=> {
  navigate('/login');
};

if you aren't using react-router and managing route via state;

it will look like

const handleLogin = ()=> {
  setLogin(true);
  setSignup(false);
};

// do something for signup hanlder


return (
  <div>
     {
      // your tab buttons
     }
    {signup && <SignupPage />}
    {login && <LoginPage />}
  </div>
)

answered Aug 30 '22 at 12:47

Yasin Tazeoglu

884
8
14

thank u for answering, I was using routers and it was working perfectly, but they asked me to do it with tabs that need to be a state – Hazal Kaya Aug 30 '22 at 12:54
would you please check my edited code? – Hazal Kaya Aug 30 '22 at 13:00
your code works well but it renders two components under each other! – Hazal Kaya Aug 31 '22 at 16:21
would you please check my edited code? – Hazal Kaya Aug 31 '22 at 16:23
I am a little bit confused. What do you mean with "your code works well but it renders two components under each other!" ? – Yasin Tazeoglu Sep 01 '22 at 11:36
Can you share a codesandbox link? – Yasin Tazeoglu Sep 01 '22 at 11:38
its done i solved it it was because i was using routers when i delete them from the App.js it worked fine thanks! – Hazal Kaya Sep 01 '22 at 13:48

score 0 · Answer 2 · answered Aug 30 '22 at 13:09

If you want to achieve this behavior using state you can do something like this. I have added comments in the code so you can better understand the code.

const App = () => {

  // depending upon this state you can show different JSX
  const [pageIndex, setPageIndex] = useState(0);

  /// function that return JSX FOR LOGIN
  const handleLoginJSX = () => {
    return <div>... login JSX </div>;
  };

  /// function that return JSX FOR SINGUP
  const handleSingUpJSX = () => {
    return <div>... sing up JSX </div>;
  };


  return (
    <div>
      {/* tab code */}
      <ul>
        <li onClick={() => setPageIndex(0)}>Login </li>
        <li onClick={() => setPageIndex(1)}>Sing up</li>
      </ul>
      {/* tab code end */}

      {/* YOUR JSX */}
      {pageIndex == 0 ? handleLoginJSX() : handleSingUpJSX()}
      {/* YOUR JSX  END*/}
    </div>
  );
};

David-T-John · Answer 3 · 2022-08-30T14:06:42.617

The concept you are referring to is called Routing. The best way to add multiple "pages" or "views" in React is by using a prebuilt library, i.e. react-router-dom rather than handling it that way.

Then you can use Link elements to route you to a different page (e.g. navigating from yoursite.com/login to yoursite.com/signup) and it will preserve the browser history so your users can use the back and forward buttons like you would expect.

View the docs for this library here: https://reactrouter.com/en/main/getting-started/tutorial

score 0 · Accepted Answer · answered Sep 01 '22 at 13:54

so, this code works well for me the problem of rendering two components under each other was because using routers in the App.js

after i have removed it, it worked fine with me

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
// import "react-tabs/style/react-tabs.css";
import "./Tabs.css";
import React from "react";
import Login from "./Login";
import SignUp from "./SignUp";

const LoginTabs = () => {
  return (
    <>
      <Tabs>
        <TabList>
          <Tab>Üyelik Girişi</Tab>
          <Tab>Yeni Üyelik</Tab>
        </TabList>

        <TabPanel>
          <h2>
            {" "}
            <Login />{" "}
          </h2>
        </TabPanel>
        <TabPanel>
          <h2>
            {" "}
            <SignUp />{" "}
          </h2>
        </TabPanel>
      </Tabs>
    </>
  );
};

export default LoginTabs;

making tabs in react for two different pages

4 Answers4