My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to remain green if it has been clicked. The issue is that the onClick event changes the color of all buttons, not just the active one.
I have tried various solutions, but none have resolved the problem. Any assistance is greatly appreciated!
Attempted solution #1:
const styles = {
footerLogo: {
width: '300px',
height: '57px',
align: 'center'
},
navLink: {
fontSize: '16px',
color: 'black',
"&:hover":{
color:'green'
}
},
active: {
color: 'green'
}
};
const navButtons = [
{
button: "Services",
link: "/services",
},
{
button: "Featured Work",
link: "/work",
},
{
button: "About",
link: "/about",
},
{
button: "Contact",
link: "/contact",
},
];
const location = window.location.pathname;
const currentTab = location === navButtons[0].link ? styles.active : styles.navLink
<Box
display='flex'
justifyContent='space-around'
marginTop='50px'
>
{navButtons.map(({button, link, index}) => (
<Button
key={index}
to={link}
component={Link}
sx={currentTab}
>
{button}
</Button>
))}
</Box>
Attempted solution #2:
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => {
setIsClicked(true)
}
<Box
display='flex'
justifyContent='space-around'
marginTop='50px'
>
{navButtons.map(({button, link, index}) => (
<Button
key={index}
to={link}
component={Link}
onClick={handleClick}
sx={{
color : isClicked ? "green" : "black",
"&:hover":{
color:'green'
}
}}
>
{button}
</Button>
))}
</Box>