根据子组件参数之一反应设置初始 state

Question

I am making an app with menu bar and sliding selected menu item indicator. It kind of works, but I have several problems:

1. The initial state ( widthOffset , leftOffset and color ) is hardcoded, but I need it to always follow the active NavLink , so when I open my app - the indicator is immediately in the right place at selected NavLink (if you select anything but Home NavLink and reload app, you will be at last page, but indicator resets to hardcoded state).
2. I did not find a way to get value of activeStyle from e.target , so colors are also weirdly hardcoded with this double menuItems.*NavLink name*.color in each NavLink .

What is the best way to implement this?

full codesandbox: https://codesandbox.io/s/ecstatic-moon-mqbnk

code:

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Navigation = () => {
  const menuItems = {
    Home: {
      color: 'orange',
    },
    About: {
      color: 'green',
    },
    Contacts: {
      color: 'rebeccapurple',
    },
  }

  const [offsetWidth, setWidth] = useState(84);
  const [offsetLeft, setLeft] = useState(26);
  const [color, setColor] = useState("orange");

  function switchMenu(e, color) {
    setWidth(e.target.offsetWidth);
    setLeft(e.target.offsetLeft);
    setColor(color);
  }

  return (
    <nav className="nav">
      <NavLink
        refs="Home"
        exact
        className="nav-item"
        activeClassName="nav-item is active"
        activeStyle={{ color: menuItems.Home.color }}
        to="/"
        onClick={(e) => switchMenu(e, menuItems.Home.color)}
      >
        Home
      </NavLink>
      <NavLink
        refs="About"
        exact
        className="nav-item"
        activeClassName="nav-item is active"
        activeStyle={{ color: menuItems.About.color }}
        to="/about"
        onClick={(e) => switchMenu(e, menuItems.About.color)}
      >
        About
      </NavLink>
      <NavLink
        refs="Contacts"
        exact
        className="nav-item"
        activeClassName="nav-item is active"
        activeStyle={{ color: menuItems.Contacts.color }}
        to="/contact"
        onClick={(e) => switchMenu(e, menuItems.Contacts.color)}
      >
        Contacts
      </NavLink>
      <span
        style={{
          position: "absolute",
          left: `${offsetLeft}px`,
          width: `${offsetWidth}px`,
          backgroundColor: `${color}`,
          bottom: "0px",
          height: "5px",
          transition: ".4s",
          zIndex: "1",
          borderRadius: "8px 8px 0 0",
        }}
      ></span>
    </nav>
  );
};

export default Navigation;

UPD:

I managed o solve some problems, using isActive of NavLink , now the indicator is always in place, but still have a lil bit of trouble:

1. I am using onClick and this destroys the state and rerendering power of React. I did not find a way to toggle useEffect to rerender the indicator when I change selected link. Also when I try not to directly change the state onClick , but to run setCurrentPage() it works 1/2 times, cause onClick happens fatser, than className change.
2. If you press Ctrl + F5 and the fonts, etc. jump - the indicator renders a little bit not in it's place. Would be nice if I could render it after all is settled.

updated codesandbox: https://codesandbox.io/s/strange-shadow-5jo68

updated Navigattion.js code:

import React, { useState, useRef, useEffect } from "react";
import { NavLink } from "react-router-dom";

const Navigation = () => {
  const [offsetWidth, setWidth] = useState(null);
  const [offsetLeft, setLeft] = useState(null);
  const [color, setColor] = useState(null);

  const Home = useRef(null);
  const About = useRef(null);
  const Contacts = useRef(null);

  const menuItems = {
    Home: {
      ref: Home,
      color: "orange",
    },
    About: {
      ref: About,
      color: "green",
    },
    Contacts: {
      ref: Contacts,
      color: "rebeccapurple",
    },
  };

  function changeIndicator(e, color) {
    setWidth(e.offsetWidth);
    setLeft(e.offsetLeft);
    setColor(color);
  }

  function setCurrentPage() {
    Object.keys(menuItems).forEach((key) => {
      if (
        menuItems[key].ref.current.className === "nav-item nav-item is active"
      ) {
        changeIndicator(menuItems[key].ref.current, menuItems[key].color);
      }
    });
  }

  useEffect(setCurrentPage);

  return (
    <nav className="nav">
      <NavLink
        ref={Home}
        isActive={(match) => {
          if (!match) {
            return false;
          }
          return true;
        }}
        exact
        className="nav-item"
        activeClassName="nav-item is active"
        activeStyle={{ color: menuItems.Home.color }}
        to="/"
        onClick={(e) => changeIndicator(e.target, menuItems.Home.color)}
      >
        Home
      </NavLink>
      ...

Answer 1

As I said in my comment you can use references to check what is the active link and then set the state

1. Change your class name to is-active

  className="nav-item"
  activeClassName="is-active"

2. Add references to the links and get the active one (this code can be better)

  const homeLink = useRef(null);
  const aboutLink = useRef(null);
  const contactLink = useRef(null);

  useEffect(() => {
    if (homeLink.current.className.includes("is-active")) {
      setWidth(homeLink.current.offsetWidth);
      setLeft(homeLink.current.offsetLeft);
      setColor(menuItems.Home.color);
    } else if (aboutLink.current.className.includes("is-active")) {
      setWidth(aboutLink.current.offsetWidth);
      setLeft(aboutLink.current.offsetLeft);
      setColor(menuItems.About.color);
    } else if (contactLink.current.className.includes("is-active")) {
      setWidth(contactLink.current.offsetWidth);
      setLeft(contactLink.current.offsetLeft);
      setColor(menuItems.Contacts.color);
    }
  }, []);


  ....

  <NavLink
     ref={homeLink}