making tabs in react for two different pages-CodePudding

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

  handleLogin = {
    setLogin,
  };
  return (
    <>
      <div className="tabs">
        <button onClick={(e) => this.handleLogin()}>Üyelik Girişi</button>

        <button className={`tab ${checkActive(2, "active")}`}>
          <SignUp />
        </button>
      </div>
    </>
  );
};

export default Tabs;

edited code:

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

  const handleSignup = () => {
    setLogin(false);
    setSignup(true);
  };
  return (
    <>
      <div className="tabs">
        <button onClick={(e) => this.handleLogin()}>Üyelik Girişi</button>
        <button></button>
        {signup && <SignupPage />}
        {login && <LoginPage />}
      </div>
    </>
  );
};

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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