Как передать ключ элемента в вложенный массив при onMouseEnter?

Question

Здравствуйте, изучаю js + react и собственно такая проблема... Хотел сделать dropdown-menu из объекта (типо mockdata) и не могу понять, как правильно отобразить список links по key родительского элемента.

{randomLinks.Navigate.map((nav_links, index) => {
  const keys = index;
  console.log(keys);
  return (
    <>
      <NavigateLink
        key={keys}
        data={nav_links.category}
        hoverMenu={hoverMenu}
        onMouseEnter={handeChangeState}
        onMouseLeave={handleChangeStateOver}
      />
      {hoverMenu && (
        <div
          key={index}
          className={`w-full mt-0 shadow-lg bg-white absolute`}
          onMouseLeave={() => setHoverMenu(false)}
          onMouseOver={() => setHoverMenu(true)}
        >
          {randomLinks.Navigate[keys].links.map((i) => {
            return <NavigatePopup key={index} data={i} />;
          })}
        </div>
      )}
    </>
  );
})}

т.е я навожу на элемент parent и он в свою очередь выдает мне key, который будет использоваться во вложенном child. Тем самым я получу элементы массивов, а сейчас у меня просто все подряд дропается...

На данный момент просто себя запутал...

Answer 1

Если я вас правильно понял, то вам надо изменить условия отображения дочерних элементов.

Для этого надо создать переменную состояния, в которую будем записывать индекс элемента, на который мышка наведена и удалять тогда, когда мышка будет убрана.

Условие отображения меняем с hoverMenu && на howId === index &&

const [howId, setHowId] = useState(null); // Хранит Index элемента

{randomLinks.Navigate.map((nav_links, index) => {
  const keys = index;
  console.log(keys);
  return (
    <>
      <NavigateLink
        key={keys}
        data={nav_links.category}
        hoverMenu={hoverMenu}
        onMouseEnter={(e) => {
          handeChangeState(e);
          setHowId(index); // При наведении записываем значение
        }}
        onMouseLeave={(e) => {
          handleChangeStateOver(e);
          setHowId(null); // Зануляем значение
        }}
      />

      {howId === index && (
        <div
          key={index}
          className={`w-full mt-0 shadow-lg bg-white absolute`}
          onMouseLeave={() => setHoverMenu(false)}
          onMouseOver={() => setHoverMenu(true)}
        >
          {randomLinks.Navigate[keys].links.map((i) => {
            return <NavigatePopup key={index} data={i} />;
          })}
        </div>
      )}
    </>
  );
})}

БЛОГ НА HUSL

Как передать ключ элемента в вложенный массив при onMouseEnter?

Ответы (1 шт):