<React/tailwind>具有 z-index 递减/渲染顺序的地图对象

Question

My Navigation bar code

import React, { useLayoutEffect, useState } from "react";
import { useQuery,useMutation } from "../../../convex/_generated";
import { Link } from "react-router-dom";
import _function from "../../function";
import { Menu } from "../../model";
import ham from "../../assets/ham.svg";
import close from "../../assets/close.svg";
import "./nav.css";

const Nav = () => {

  let {windowSize} = _function();

  const [showSidebar, setShowSidebar] = useState(false);

  const list : {id:number, display: string, url: string, picurl: string }[]= [
    Menu(1,"Home","/",ham),
    Menu(2,"About","/about",ham),
    Menu(3,"Skill","/skills",ham),
    Menu(4,"Work","/works",ham),
    Menu(5,"Contact","/contact",ham)
];

  function navContentSwitch(text:string,url:string) { 
    return windowSize() >= 640 ? text : (<img
    width="20px"
    alt="smallicon"
    src={url}
  />) ;
  };

  return <nav>
  {showSidebar ? (
    <img
      className="flex z-30 items-center fixed left-5 top-5"
      onClick={() => setShowSidebar(!showSidebar)}
      src={close}
      width="50px"
      alt=""
    />
  ) : (
    <img
      onClick={() => setShowSidebar(!showSidebar)}
      className="fixed z-30 flex items-center cursor-pointer left-5 top-5"
      src={ham}
      width="40px"
      alt=""
    />
  )}
<div className="top-0 left-0 text-white fixed h-full z-40">
  <nav
    className={`z-50 fixed top-2/4 -translate-y-[calc(50%+3vh)] ${
      showSidebar ? "block" : "hidden"
    }`}
  >
    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li id="listmenu" className="btn3d-li z-10">{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>
  </nav>
</div>
</nav>
};

export default Nav;

Problem is z-index must be decrement from z-50 to z-10. My code before map

<ul className=" ">
  <Link key={list[0].id} className="btn3d-a glow" to={list[0].url}>
    <li id="listmenu" className="btn3d-li z-50">
      {navContentSwitch(list[0].display, list[0].picurl)}
    </li>
  </Link>
  <Link key={list[1].id} className="btn3d-a glow" to={list[1].url}>
    <li id="listmenu" className="btn3d-li z-40">
      {navContentSwitch(list[1].display, list[1].picurl)}
    </li>
  </Link>
  <Link key={list[2].id} className="btn3d-a glow" to={list[2].url}>
    <li id="listmenu" className="btn3d-li z-30">
      {navContentSwitch(list[2].display, list[2].picurl)}
    </li>
  </Link>
  <Link key={list[3].id} className="btn3d-a glow" to={list[3].url}>
    <li id="listmenu" className="btn3d-li z-20">
      {navContentSwitch(list[3].display, list[3].picurl)}
    </li>
  </Link>
  <Link key={list[4].id} className="btn3d-a glow" to={list[4].url}>
    <li id="listmenu" className="btn3d-li z-10">
      {navContentSwitch(list[4].display, list[4].picurl)}
    </li>
  </Link>
</ul>;

I tried to write class name this way

    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li id="listmenu" className={`btn3d-li ${<--do something-->}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>

In a "do something" part. I declare ZLevel state with additional function to return string (z-50 ...) and write inside it like

• ZLevel && ZChange()
• ZChange()

and I get this error ("Too many re-renders. React limits the number of renders to prevent an infinite loop"). Is there a way to do z-index increment or What is the correct way to do so.

I am react beginner so any advice will be appreciated.

Correct Code From Zachiah Advice

    <ul className=" ">
      {list.map(item => {
        return <Link key={item.id} className="btn3d-a glow" to={item.url}>
        <li className={`btn3d-li z-${(list.length - item.id)*10}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>})}
    </ul>

Additional Information after Zachiah advice i found that when upload to host z-index is still not work properly even it work fine before deploy.And i find out about this by : Is it possible to change the order of list items using CSS3? : https://coder-coder.com/z-index-isnt-working/ It's mean that what render first stack in a bottom .

So in order to make first menu get render last just flip a list position

  //by order of apperance affect z-index ***firstmenu = last in list***
  const list: {display: string; url: string; picurl: string }[] = [
    Menu("Contact", "/contact", "fa-solid fa-address-book"),
    Menu("Work", "/works", "fa-solid fa-laptop-file"),
    Menu("Skill", "/skills", "fa-solid fa-user-gear"),
    Menu("About", "/about", "fa-solid fa-address-card"),
    Menu("Home", "/", "fa-solid fa-house-chimney")
  ];

and rewrite ul list map like this.

<ul className="flex flex-col-reverse">
  {list.map((item, index) => {
    return (
      <Link key={index} className="btn3d-a glow" to={item.url}>
        <li className="btn3d-li">
          {navContentSwitch(item.display, item.picurl)}
        </li>
      </Link>
    );
  })}
</ul>; 

It a lot cleaner like this and no need of z-index at all.

Answer 1

If I'm not mistaken all you want to do is:

<ul className=" ">
  {list.map((item, index) => (
      <Link key={item.id} className="btn3d-a glow" to={item.url}>
          <li id="listmenu" className={`btn3d-li z-${(list.length - index) * 10}`}>{navContentSwitch(item.display,item.picurl)}</li>
      </Link>
  )}
</ul>

Notice the second argument to .map on an array is the index. If this isn't what you're looking for, please let me know.