ReactJS: click interaction not working on my content but working on header

Issue

Goal : display an iframe with a Youtube video and the user can click play/pause
Problem: I can’t click on anything in my main content, but it works just fine if I put it in the Navigation component or the Footer component
What I’ve tried: I tried many debugging to finally found this was the issue, but now I can’t figure out what to do

Here is the code of the Navigation component which works fine :

import React, { useState }  from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import { Link } from "react-router-dom";

import {NavLink} from "react-router-dom";
import {
    AiOutlineHome,
} from "react-icons/ai";
import {Button} from "react-bootstrap";

function Navigation() {
  const [expand, updateExpanded] = useState(false);
  const [navColour, updateNavbar] = useState(false);

  function scrollHandler() {
    if (window.scrollY >= 20) {
      updateNavbar(true);
    } else {
      updateNavbar(false);
    }
  }
  window.addEventListener("scroll", scrollHandler);

    return (
        <Navbar
            expanded={expand}
            fixed="top"
            expand="md"
            className={navColour ? "sticky" : "navbar"}
        >
          <Container>
            <Navbar.Brand href="/" className="d-flex">
              <p style={{marginTop: "15px"}}><strong className="main-name"> D</strong>egen <strong className="main-name">B</strong>ounty <strong className="main-name">H</strong>unter</p>
            </Navbar.Brand>
            <Navbar.Toggle
                aria-controls="responsive-navbar-nav"
                onClick={() => {
                  updateExpanded(expand ? false : "expanded");
                }}
            >
            </Navbar.Toggle>
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="ms-auto" defaultActiveKey="#home">
                <Nav.Item>
                  <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                    <AiOutlineHome style={{ marginBottom: "2px" }} /> Home
                  </Nav.Link>
                </Nav.Item>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
    );
}

export default Navigation;

Here is the code of the Whitepaper component which doesn’t allow me to click on anything :

import React from "react";
import {Container, Row, Col} from "react-bootstrap";
import wp_1 from "../Assets/wp_1.png";

function Whitepaper() {
    return (<section>
            <Container fluid className="whitepaper-section" id="whitepaper">
                <Container className="whitepaper-content">
                    <div>
                        <button onClick={() => alert("test")}>Add</button>
                        <iframe
                            src="https://www.youtube.com/embed/E7wJTI-1dvQ"
                            frameBorder="0"
                            allow="autoplay; encrypted-media"
                            allowFullScreen
                            title="video"
                        />
                        {" "}
                    </div>

                    <Row>
                        <Col md={12}>
                            <img src={wp_1} alt="roadmap pic" className="img-fluid" style={{maxWidth: '50%'}}/>
                        </Col>
                    </Row>
                </Container>
            </Container>
        </section>);
}

export default Whitepaper;

So once again, when I pass my cursor over the button or the iframe, the cursor shape doesn’t change and I can’t click. I can select text, select image and right click everywhere.

In the CSS file I looked for pointer-events: none; but I don’t have anything like this

What is happening ?

Solution

The problem was in the css file I had :

z-index: -1;

Removed this line and it’s working fine now

Answered By – J.erome

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.