How in React check if two conditions are true

Issue

I am making Navbar and I am a little bit stuck.
Here is my code:

Navigation.jsx

import React, {useState} from "react";
import { NavData } from "./NavigationData";
import "../styles/Navigation.css"

export default function Navigation() {
    const [isMouseOver, setIsMouseOver] = useState(false);
    return (
        <nav className="navbar">
                <a href="/">LOGO</a>
            <div className="menu">
                <ul  onMouseEnter={() => {setIsMouseOver(true)}}
                onMouseLeave={() => {setIsMouseOver(false)}}>
                    {NavData.map((val, key) => {
                        return (
                            <li key={key.id} 
                            onClick={() => window.location.pathname = val.link}
                            >
                                {isMouseOver ? (<div className="name">{val.name}</div>) : (<div className="icon">{val.icon}</div>) }
                            </li>
                        )
                    })}
                </ul>
            </div>
        </nav>
    );
}

NavigationData.jsx

import React from "react";
import { FaHome, FaImages, FaShoppingBag, FaQuestionCircle, FaProductHunt } from "react-icons/fa";

export const NavData = [
    {
        id: 1,
        name: "Home",
        icon: <FaHome />,
        link: "/home"
    },
    {
        id: 2,
        name: "Gallery",
        icon: <FaImages />,
        link: "/gallery"
    },
    {
        id: 3,
        name: "Products",
        icon: <FaProductHunt />,
        link: "/products"
    },
    {
        id: 4,
        name: "Shop",
        icon: <FaShoppingBag />,
        link: "/shop"
    },
    {
        id: 5,
        name: "About",
        icon: <FaQuestionCircle />,
        link: "/about"
    }
]
  1. I am checking if mouse is Entering or Leaving an ul and substituting icons with text. But as well I don’t need to show text when screen size is below 768px and just show icons. At the moment when mouse is over icons disappears and because of this in CSS I see nothing:
@media screen and (max-width: 768px){

    .name {
        display: none;
    }
}

And the second question is: How can I substitute icon for the text when I hover on every single icon separately. E.g. I hover over Home icon => it disappears and the text Home appears on its place. Thanks

Solution

Alright first question, we can use plain CSS for this solution. CSS allows you to style a child element when its parent is hovered which is exactly what we need here.

Instead of targeting a max-width value we’ll target a min-width value to reduce code.
So, add a class to the and each nav text and icon and each

  • gets to be the parent which answers your second question final code goes like this:

     <ul>
          {NavData.map((val, key) => {
            return (
              <li
                className="childLI"
                key={key.id}
                onClick={() => (window.location.pathname = val.link)}
              >
                  <div className="name">{val.name}</div>
                  <div className="icon">{val.icon}</div>
                
              </li>
            );
          })}
        </ul>
    

    and the CSS:

     .name {
        display:none
      }
    
    
      @media screen and (min-width: 768px) {
        .childLI:hover  .icon{
          display:none;
        }
        .childLI:hover  .name{
          display:block;
        }
      }
    

    edit: you don’t state or mouseover functions.

    Answered By – Shocky

    Answer Checked By – Marilyn (AngularFixing Volunteer)

  • Leave a Reply

    Your email address will not be published.