0
218
ViewsI would like to change only clicked header link text color with react
I started to learn to code recently and to create my portfolio. I am working on the header and I would like to change the text color header link tag when it is only clicked once. When I clicked the link, the text color changed to red and when I clicked the link now but when I click another link, the previous link is still red.
I would like to change the text color back from red to gray when I click another. Example:- OK - home about work skill contact NO - home about work skill contact
Header.jsx
import React, { useState } from "react";
import { Link as ScrollLink } from "react-scroll";
const Header = (props) => {
const { headerPage } = props;
const [onClickChangeColor, setOnClickChangeColor] = useState(false);
const redText = () => {
setOnClickChangeColor(!onClickChangeColor);
};
return (
<div class="mr-8 cursor-pointer">
<ScrollLink
className={onClickChangeColor ? "text-[#FF5757]" : ""}
onClick={redText}
to={headerPage}
smooth={true}
duration={500}
>
{headerPage}
</ScrollLink>
</div>
);
};
export default Header;
HeaderLayout.jsx
import React from "react";
import Header from "./Header";
const HeaderLayout = () => {
const headerPages = ["home", "about", "work", "skill", "contact"];
return (
<div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]">
{headerPages.map((headerPage) => (
<Header headerPage={headerPage}>{headerPage}</Header>
))}
<div
className="resume"
class="w-24 h-8 text-[#FF5757] border border-[#FF5757] rounded-md"
>
<a
href="https://drive.google.com/file/d/usp=sharing"
class="block"
>
resume
</a>
</div>
</div>
);
};
export default HeaderLayout;
I am using React and Tailwind. English is my second language and I hope everyone understands what I want to do. Thank you in advance.
2 answers
Answer question0
You can track the selected item index in the HeaderLayout component and then use it to decide the header item color depending on that.
- Add another state to maintain the selected header item state in
HeaderLayout.
const [selectedIndex, setSelectedIndex] = useState(-1);
- Provide the
headerIndex,selectedIndex, andsetSelectedIndexas props to theHeadercompoenent.
{headerPages.map((headerPage, headerIndex) => (
<Header
headerPage={headerPage}
setSelectedIndex={setSelectedIndex}
selectedIndex={selectedIndex}
headerIndex={headerIndex}
>
{headerPage}
</Header>
))}
- In the
Headercomponent get the props and set the header item CSS as below.
const { headerPage, selectedIndex, setSelectedIndex, headerIndex } = props;
...
...
<ScrollLink
className={headerIndex === selectedIndex ? "text-[#FF5757]" : ""}
onClick={() => setSelectedIndex(headerIndex)}
to={headerPage}
smooth={true}
duration={500}
>
Working Demo
0
change the color handling state to parent (Header Layout)
const HeaderLayout = () => {
const headerPages = ["home", "about", "work", "skill", "contact"];
const [selectedHeader, changeSelectedHeader] = useState("");
return (
<div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]">
{headerPages.map((headerPage) => (
<Header
headerPage={headerPage}
changeSelectedHeader={changeSelectedHeader}
selectedHeader={selectedHeader}
>
{headerPage}
</Header>
))}
then, make the child like this
import React from "react";
import { Link as ScrollLink } from "react-scroll";
const Header = (props) => {
const { headerPage, changeSelectedHeader, selectedHeader } = props;
const redText = () => {
changeSelectedHeader(headerPage);
};
return (
<div class="mr-8 cursor-pointer">
<ScrollLink
className={headerPage === selectedHeader ? "text-[#FF5757]" : ""}
onClick={redText}
to={headerPage}
smooth={true}
duration={500}
>
{headerPage}
</ScrollLink>
</div>
);
};
export default Header;