How do I change the color of an icon for only the tab that's pressed in React?-CodePudding

I have a footer at the bottom of my react app that has four icons that act as tabs. I want to change the color of the icon that is pressed. With my current code it changes more than one icon when one is pressed. I am not sure how to implement in if statement into this to only change the color of the icon that is pressed and revert the active icon back to its grey color. Any help is appreciated, here is the footer from my app:

import {React, useState} from "react";
import "./Footer.css";
import NightlightRoundedIcon from '@mui/icons-material/NightlightRounded';
import { IconButton } from "@mui/material";
import PersonIcon from '@mui/icons-material/Person';
import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
import FavoriteIcon from '@mui/icons-material/Favorite';

function Footer() {

    const [isActive, setIsActive] = useState(true);
    const [isActive1, setIsActive1] = useState(false);
    const [isActive2, setIsActive2] = useState(false);

    const handleClick = () => {
        setIsActive(current => !current);
        setIsActive1(current => !current);
        setIsActive2(current => !current);
    }
    const handleClick1 = () => {
        setIsActive1(current => !current);
        setIsActive(current => !current);
        setIsActive2(current => !current);
    }
    const handleClick2 = () => {
        setIsActive2(current => !current);
        setIsActive1(current => !current);
        setIsActive(current => !current);
    }

    return (
        <div className="footer">
            <IconButton>
                <NightlightRoundedIcon 
                    style={{
                        color: isActive ? '#FF5349' : '',
                    }}
                    className="titleIcon"
                    onClick={handleClick} 
                    fontSize="large" />
            </IconButton>
            <IconButton>
                <FavoriteIcon 
                    style={{
                        color: isActive1 ? '#FF5349' : '',
                    }}
                    className="titleIcon"
                    onClick={handleClick1} 
                    fontSize="large" />
            </IconButton>
            <IconButton>
                <QuestionAnswerRoundedIcon 
                    style={{
                        color: isActive2 ? '#FF5349' : '',
                    }}
                    className="titleIcon"
                    onClick={handleClick2} 
                    fontSize="large" />
            </IconButton>
            <IconButton>
                <PersonIcon className = "titleIcon" fontSize = "large" />
            </IconButton>
        </div>
    )
}

export default Footer

CodePudding user response：

In handleClick(), you toggle isActive and you set the rest of them to inactive.

const handleClick = () => {
  setIsActive(current => !current);
  setIsActive(false);
  setIsActive(false);
}

The same goes with the other two functions, toggle the corresponding color and set the rest of them to false