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


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 {
} 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) {
    } else {
  window.addEventListener("scroll", scrollHandler);

    return (
            className={navColour ? "sticky" : "navbar"}
            <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>
                onClick={() => {
                  updateExpanded(expand ? false : "expanded");
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="ms-auto" defaultActiveKey="#home">
                  <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                    <AiOutlineHome style={{ marginBottom: "2px" }} /> Home

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">
                        <button onClick={() => alert("test")}>Add</button>
                            allow="autoplay; encrypted-media"
                        {" "}

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

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 ?


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.