onClick not invoked when clicking on sidebar

Question

In my main container the layout has this code

import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';

class Layout extends Component {
    state = {
        showSideBar: true
    }

    sideBarToggleHandler = () => {
        console.log("test");       
    }

    render() {

        return (
            <div>
                <Header />
                <div>
                    <SideBar onClick={this.sideBarToggleHandler}/>
                    <main id="main">
                        {this.props.children}
                    </main>
                </div>
            </div>
        )
    }
}

export default Layout;

Whenever I click on any element in the side bar I want to console log test

For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine

This is my sidebar:

import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {


    }
    return (
        <div className={Classes.SideBar}>
            <Logo />
            <nav>
                <NavigationItems />
            </nav>
        </div>
    );
};

export default sideBar;

and this is my navigation items:

import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome } from '@fortawesome/free-solid-svg-icons';
import { faFileAlt } from '@fortawesome/free-solid-svg-icons';
import { faChartLine } from '@fortawesome/free-solid-svg-icons';

library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);

const navigationItems = (props) => {
    return (
        <Aux>

            <p>CONSUMER</p>
            <ul className={classes.NavigationItems}>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</a></li>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</a></li>
                <li><a href="/"><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</a></li>
            </ul>
            <div className={classes.Divider}></div>
            <div className={classes.ButtonPosition}>

                <button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
            </div>
            <div className={classes.Divider + ' ' + classes.DividerBottom}></div>
            <p className={classes.footer}>Micheal Alfa v 1.0.0</p>
            <p className={classes.footer}>Copyrights @ 2019 All Rights Reserved</p>
        </Aux>

    );
};

export default navigationItems;

Any ideas? Thank you

Answer 1

You are not doing anything with the passed onClick event. You need to put it on something, like so:

const sideBar = (props) => (
  <div onClick={this.props.onClick} className={Classes.SideBar}>
    <Logo />
    <nav>
      <NavigationItems />
    </nav>
  </div>
);

export default sideBar;

This will fire that event when you click on the div. Make sense?