title: making tabs in react for two different pages
body: <p>I'm trying to make tabs in reactjs but couldn't do it</p>
  <p>what I want is to have tabs between sign-in and signup pages</p>
  <p>both of the pages have a separate component</p>
  <p>I know that I'm missing something but not sure where it is</p>
  <p>here is my code</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Login from &quot;./Login&quot;;
  import SignUp from &quot;./SignUp&quot;;
  
  const Tabs = () =&gt; {
    const [login, setLogin] = useState(true);
    const [signup, setSignUp] = useState(true);
  
    const handleLogin = () =&gt; {
      setLogin(true);
      setSignUp(false);
    };
  
    return (
      &lt;&gt;
        &lt;div className=&quot;tabs&quot;&gt;
          &lt;button onClick={() =&gt; setLogin(true)}&gt; Üyelik Girişi&lt;/button&gt;
          &lt;button onClick={() =&gt; setLogin(false)}&gt;Yeni Uyelik&lt;/button&gt;
          {signup &amp;&amp; &lt;SignUp /&gt;}
          {/* {login &amp;&amp; &lt;Login /&gt;} */}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Tabs;
  </code></pre>
  <p>So, what I can't figure out is how to direct the function to the desired page</p>