How to route to these pages with buttons of same props?

Question

I am trying to route four buttons of same props to different routes in react but it is not working. I already created the routes, tried to use use Navigate but it didn't work.

     import React, {useState} from "react";
         import classes from "../classes";
    
function Card(props) {
         const [click, setClick] = useState("/")
            const activeButton = document.querySelector (".btn");
            const handleClick = () => {
             switch   (activeButton){
             case classes.id1:
          setClick ("jss-1-record")
          break;
          case classes.id2:
          setClick ("jss-2-record")
          break;
          case classes.id3:
          setClick ("jss-1-record")
          break;
          case classes.id4:
          setClick ("jss-2-record")
        
          default:
          setClick ("Page-Structure")
             }
          }
    
      return (
        
          <div className="container">
            <div className="card">
              <div className="top">
                <img className="circle-img" src={props.img} alt="" />
              </div>
              <div className="bottom">
              <button className="btn" onClick= {() =>{click && handleClick }}>
          <h2>{props.name}</h2>
        </button> 
    
           </div>
         </div>
          </div>
      );
      }
    export default Card; 

Answer 1

you don't need that, you need understand the props power.

function Card(props) {
    // imported from react-router-dom
    const navigate = useNavigate()
    // imported from react-router-dom
    const location = useLocation()
    
  const handleClick = () => {
    // Use the virtual router for reassign location
    navigate(props.path)
  };
  return (
    <div className="container">
      <div className="card">
        <div className="top">
          <img className="circle-img" src={props.img} alt="" />
        </div>
        <div className="bottom">
            {/* if location path is the same of the card props.path add active class for trigger it in your css */}
          <button className={`btn ${location.path === props.path && "active"}`} onClick={handleClick}>
            <h2>{props.name}</h2>
          </button>
        </div>
      </div>
    </div>
  );
}

function ParentComponent() {
    //define your props in the parent 
const btnProps = [
    {name:"btn1", path: "/", img:"https://url-or-src"},
    {name:"btn2", path: "/blog", img:"https://url-or-src"},
    {name:"btn3", path: "/article", img:"https://url-or-src"},
    {name:"btn4", path: "/comment", img:"https://url-or-src"}
]
    return (
        // react fragment <> for wrap many element without use div 
        <>
        <h1>Exemple parent title</h1>
        {btnProps.map((btnProp, index) =>  <Card key={index} props={btnProp}/>)}
        </>
      );
    
}

    

ideally, elements like your card should only render and interpret its props, which are distributed by the parent, so your component is reusable.

I think you've tried to target the active button.

Some libraries can do this for you, and react-router-dom's component offers native tracking of the active button, which in your case is probably a better solution, if it's some kind of menu or navbar.