I started to learn coding recently and to create my portfolio. I am working on header and I would like to change the text color header link tag when it is only clicked one. Text color changed to red when I clicked the link now but when I click another link, the previous link is still red.

CodePudding user response：

change the color handling state to parent (Header Layout)

const HeaderLayout = () => {
  const headerPages = ["home", "about", "work", "skill", "contact"];
  const [selectedHeader, changeSelectedHeader] = useState("");

  return (
    <div >
      {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 >
      <ScrollLink
        className={headerPage === selectedHeader ? "text-[#FF5757]" : ""}
        onClick={redText}
        to={headerPage}
        smooth={true}
        duration={500}
      >
        {headerPage}
      </ScrollLink>
    </div>
  );
};

export default Header;