I would like to change only clicked header link text color with react

user_19348538 0
Viewed 60

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.

enter image description here

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.

reactjs javascript
2 Answers

You can track the selected item index in the HeaderLayout component and then use it to decide the header item color depending on that.

  1. Add another state to maintain the selected header item state in HeaderLayout.
const [selectedIndex, setSelectedIndex] = useState(-1);
  1. Provide the headerIndex, selectedIndex, and setSelectedIndex as props to the Header compoenent.
{headerPages.map((headerPage, headerIndex) => (
  <Header
    headerPage={headerPage}
    setSelectedIndex={setSelectedIndex}
    selectedIndex={selectedIndex}
    headerIndex={headerIndex}
  >
    {headerPage}
  </Header>
))}
  1. In the Header component 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

Edit headless-night-nfvg5l

user_85104050

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;
user_117267610
Related