How can I use onClick

Question

On the small screen, it doesn't show/hide. How can I change this code to work on the small screen?

import React from 'react';
import assets from './assets';
import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa';

var navLinks = document.getElementById('navLinks');
function showMenu() {
    navLinks.style.right = "0";
}
function hideMenu() {
    navLinks.style.right = "-200px";
}

Above var worked a few times mistakenly, but I still did not get it.

export const Home = () => (
    <>
        <section class="header">
            <nav>
                <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a>
                <div id='navLinks' class='nav-links'>
                    <FaTimes class='fa' onClick={showMenu} />
                    <ul>
                        <li><a href="/">HOME</a></li>
                        <li><a href="/About">ABOUT</a></li>
                        <li><a href="/Course">COURSE</a></li>
                        <li><a href="/Blog">BLOG</a></li>
                        <li><a href="/Contact">CONTACT</a></li>
                    </ul>
                </div>
                <FaBars class='fa' onClick={hideMenu} />
            </nav>

            <div class="text-box">
                <h1>World's Biggest University</h1>
                <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p>
                <a href="/Contact" class="hero-btn">Visit Us to Know More</a>
            </div>
        </section>
    </>
)

My CSS file is below. I've tried many ways but I couldn't.

nav .fa{
  display: none;
}

Answer 1

As some people have mentioned before you are not utilising the React library correctly.

The (untested) code below should suit you better. As you can see a state has been used instead of directly changing style properties. I have tried to comment the code as clearly as possible but for more in depth instructions i recommend reading the React docs.

import React, { useState } from 'react';
import assets from './assets';
import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa';

export const Home = () => {

    // Set state value to keep track of menu open or closed status
    const [navOpen, setNavOpen] = useState(false)

    // Open the active menu
    const open = () => {
        setNavOpen(true)
    }

    // Close the active menu
    const close = () => {
        setNavOpen(false)
    }

    return (
        <>
            <section class="header">
                <nav>
                    <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a>
                    <div id='navLinks' class='nav-links'>
                        <button onClick={open}>
                            <FaTimes class='fa' />
                        </button>

                        {
                            // Only render the UL node when the navOpen variable is true
                            navOpen && (
                                <ul>
                                    <li><a href="/">HOME</a></li>
                                    <li><a href="/About">ABOUT</a></li>
                                    <li><a href="/Course">COURSE</a></li>
                                    <li><a href="/Blog">BLOG</a></li>
                                    <li><a href="/Contact">CONTACT</a></li>
                                </ul>
                            )
                        }
                        
                    </div>
                    <button onClick={close}>
                        <FaBars class='fa' />
                    </button>
                </nav>
    
                <div class="text-box">
                    <h1>World's Biggest University</h1>
                    <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p>
                    <a href="/Contact" class="hero-btn">Visit Us to Know More</a>
                </div>
            </section>
        </>
    )
}