Question 52180 in Javascript Question posted in
A very good W3school tutorial can be found here.

React Icon Changes on Click – Javascript

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!

Tags:

3

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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>
  );
};
    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search