React Icon Changes on Click

Question

I cant for the life of me figure this out. I would like the React icons below to fill and stay filled on click and change back to outlined when another is clicked. Here is the code:

import { useState } from "react";
import { Link } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";

const FooterNav = () => {
  return (
    <div className="footer-nav-container">
      <div className="footer-nav-icon">
        <Link to="/">
          <AiOutlineHome className="home-icon" />
          <p>Home</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/past">
          <BsCalendarCheck className="calendar-check-icon" />
          <p>Past</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/upcoming">
          <BsCalendarPlus className="calendar-plus-icon" />
          <p>Upcoming</p>
        </Link>
      </div>
    </div>
  );
};

export default FooterNav;

I would love some assistance with this. Thank you!

Do you mean when you are on home page, home icon will be filled, others will be outlined. When you visit Past calender will be filled and others outline? — CodeThing, Mar 31 '23 at 17:46
You can make use of useLocation hook from react-router-dom. This give you current location details. Based on that you can decide which icon to load. Reference: https://reactrouter.com/en/main/hooks/use-location — CodeThing, Mar 31 '23 at 17:58

score 1 · Accepted Answer · answered Mar 31 '23 at 18:14

As mentioned in the comments,

You can make use of useLocation hook from react-router-dom. This give you current location details. Based on that you can decide which icon to load.

I haven't tested this but something like this would work

import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
import { BsCalendarCheck } from "react-icons/bs";
import { BsCalendarCheckFill } from "react-icons/bs";
import { BsCalendarPlusFill } from "react-icons/bs";
import { BsCalendarPlus } from "react-icons/bs";
import "./FooterNav.css";

const FooterNav = () => {
  const location = useLocation();
  console.log(location);

  return (
    <div className="footer-nav-container">
      <div className="footer-nav-icon">
        <Link to="/">
          {location.pathname === "/" ? <AiFillHome className="home-icon" /> : <AiOutlineHome className="home-icon" />}
          <p>Home</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/past">
          {location.pathname === "/past" ? <BsCalendarCheckFill className="calendar-check-icon" /> : <BsCalendarCheck className="calendar-check-icon" />}
          <p>Past</p>
        </Link>
      </div>
      <div className="footer-nav-icon">
        <Link to="/upcoming">
          {location.pathname === "/upcoming" ? <BsCalendarPlusFill className="calendar-plus-icon" /> : <BsCalendarPlus className="calendar-plus-icon" /> }
          <p>Upcoming</p>
        </Link>
      </div>
    </div>
  );
};

export default FooterNav;

how would you keep the icon in the active state (filled) when traveling to other pages within that tab? — Jeff Barra, Apr 01 '23 at 18:28
Nevermind...I just use || and the route and it'll stay filled — Jeff Barra, Apr 01 '23 at 18:55

Kary · Answer 2 · 2023-03-31T18:21:48.143

useLocation hook from react-router is good a start. Try something along the ways:

import { useLocation } from 'react-router-dom'
import { AiOutlineHome } from "react-icons/ai";
import { AiFillHome } from "react-icons/ai";
    
const FooterNav = () => {
  const location = useLocation()
  const isLocationHome = location.pathname === '/'

  return (
    <div className="footer-nav-container">
      <div className="footer-nav-icon">
        <Link to="/">
          {isLocationHome ? 
            <AiFillHome /> :
            <AiOutlineHome className="home-icon" />  
          }
          <p>Home</p>
        </Link>
        ...
      </div>
    </div>
  );
};

score 0 · Answer 3 · answered Mar 31 '23 at 20:01

0

As mentioned above, you can use the useLocation() hook as shown in this sandbox https://codesandbox.io/s/modest-lehmann-qfm6uf?file=/src/styles.css

answered Mar 31 '23 at 20:01

danielperaza

412
3
12

React Icon Changes on Click

3 Answers3