How to load active class for link in react-CodePudding

Created one simple tab for loading components, tabs are working fine but a "active" class loading for all Navlinks, on rendering. "active" class should load only for active tab. please help to fix this

import React, { useState } from 'react';
import { NavLink, Outlet } from "react-router-dom"; 
 
function SidenavSection(props) {
const [active, setActive] = useState("tab1")

    return (
        <div>          
            <div >
            <div sm="3" className='border sideNav'>
            <NavLink to="" className="btn btn-link"    onClick={() => setActive("tab1")}>Overview</NavLink> <br/>
            <NavLink to="" className="btn btn-link"  onClick={() => setActive("tab2")}>Align & Ratio</NavLink> <br/>
            <NavLink to="" className="btn btn-link"    onClick={() => setActive("tab3")}>Avatar</NavLink> <br/>       

                </div>
                <div sm="9" className='border'>                   
                    <div>
                    {active === "tab1" && <div>section component 1</div>}
                    {active === "tab2" && <div>section component 2</div>}
                    {active === "tab3" && <div>section component 3</div>}
               
            </div>
                </div>
            </div> 
        </div>
    );
}

export default SidenavSection;

CodePudding user response：

First of all, you don't need to use NavLink for this. You can achieve active class by adding a ternary operator for the classnames.

import React, { useState } from "react";
    import { NavLink } from "react-router-dom";
    export default function App() {
      const [active, setActive] = useState("tab1");
    
  return (
    <div>
      <div>
        <div sm="3" className="border sideNav">
          <p
            to=""
            className={`btn btn-link ${active === "tab1"? "active":""}`}
            onClick={() => setActive("tab1")}
          >
            Overview
          </p>{" "}
          <br />
          <p
            to=""
            className={`btn btn-link ${active === "tab2" && "active"}`}
            onClick={() => setActive("tab2")}
          >
            Align & Ratio
          </p>{" "}
          <br />
          <p
            to=""
            className={`btn btn-link ${active === "tab3" && "active"}`}
            onClick={() => setActive("tab3")}
          >
            Avatar
          </p>{" "}
          <br />
        </div>
        <div sm="9" className="border">
          <div>
            {active === "tab1" && <div>section component 1</div>}
            {active === "tab2" && <div>section component 2</div>}
            {active === "tab3" && <div>section component 3</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

You should however try making an object or array including the links data, so you can easily loop through without much code, and setting active link also will be easier this way.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
export default function App() {
  const [active, setActive] = useState("0");
  const els = [
    {tab:1, name: "Overview",},
    {tab:2, name: "Avatar"},
    {tab:3, name: "Align & Ratio"},
  ]
  return (
    <div>
      <div>
        <div sm="3" className="border sideNav">
          {
            els.map((item, index)=>{
              return <p 
                onClick={()=>{setActive(index)}} 
                key={index}  
                className={index === active ? "active" : ""}
              >
                {item.name}
              </p>
            })
          }
          <br />
        </div>
        <div sm="9" className="border">
          <div>
            {active === "tab1" && <div>section component 1</div>}
            {active === "tab2" && <div>section component 2</div>}
            {active === "tab3" && <div>section component 3</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

You need to either use routing/conditional displaying using Javascript, here your trying to use both.

Without routing

import React, { useState } from 'react';
import { NavLink, Outlet } from "react-router-dom"; 
 
function SidenavSection(props) {
    const [active, setActive] = useState("tab1")

    const isActive = (key) => (active === key ? 'active' : '');

    return (
        <div>          
            <div >
            <div sm="3" className='border sideNav'>
            <a href="" className=`btn btn-link ${isActive('tab1')}`    onClick={() => setActive("tab1")}>Overview</a> <br/>
            <a href="" className=`btn btn-link ${isActive('tab2')}`  onClick={() => setActive("tab2")}>Align & Ratio</a> <br/>
            <a href="" className=`btn btn-link ${isActive('tab3')}`    onClick={() => setActive("tab3")}>Avatar</a> <br/>       

                </div>
                <div sm="9" className='border'>                   
                    <div>
                    {active === "tab1" && <div>section component 1</div>}
                    {active === "tab2" && <div>section component 2</div>}
                    {active === "tab3" && <div>section component 3</div>}
               
            </div>
                </div>
            </div> 
        </div>
    );
}

export default SidenavSection;