Expected onClick listener to be a function, instead got type string Unknown event handler property onclick. Did you mean `onClick`?

Question

import React from 'react';
import './styles/index.css';
import ReactDOM from 'react-dom';
import AboutUs from './about.js';
import ContactForm from './contact.js';
import MainBody from './mainbody.js';
import Footer from './footer.js';



class Header extends React.Component
{
    constructor(props)
    {
        super(props);
        this.opengdMenu=this.opengdMenu.bind(this);
        this.openDesktopAboutusForm=this.openDesktopAboutusForm.bind(this);
        this.openDesktopContactForm=this.openDesktopContactForm.bind(this);
        this.loadHomePage=this.loadHomePage.bind(this);
        this.state={
            isMenuOpen:false           //state variable to change the state of menu from open to close and vice-versa.
        };
    }



    opengdMenu()
    {
          this.setState({isMenuOpen:!this.state.isMenuOpen});
          if(this.state.isMenuOpen===true)
          {
           var about_us = document.getElementById('about');
             about_us.setAttribute("style","display:none");
          }

    }
    openDesktopAboutusForm()
    {
      ReactDOM.render(<AboutUs />,document.getElementById('about'));
    }
    openDesktopContactForm()
    {
      ReactDOM.render(<ContactForm />,document.getElementById('about'));
    }
    loadHomePage()
    {
      this.render()

      ReactDOM.render(<MainBody />, document.getElementById('mainbody'));

      ReactDOM.render(<Footer />,document.getElementById('footer'));

    }
    render()
    {
        if(!this.state.isMenuOpen)     //this part will render the header with the menu closed.
        {
            return(
              <div>
               <div className="row">

                  <div className="gd_header_section body_fixed_content  hidden-xs hidden-sm">
                    <div className="gd_header_default_container" id="gd_header_default_container">
                      <img className="gd_header_logo_icon" onClick={this.loadHomePage} src={require('./images/GD_Logo_white.png')} alt="gd logo_icon_ desktop"  />
                      <img className="gd_header_menu_icon" onClick={this.opengdMenu}  src={require('./images/menu_icon.png')} alt="gd  menu icon"  />
                      <div className="gd_header_login">LOGIN</div>
                  </div>
                  </div>
                </div>

                <div className="row">
                  <div className="gd_small_header_section body_fixed_content visible-xs visible-sm">
                    <div className="gd_small_header_default_container" id="gd_small_header_default_container">
                      <img className="gd_small_header_logo_icon1" src={require('./images/GD_Logo_white.png')} alt="GD logo white" onClick={this.loadHomePage} />
                      <img className="gd_small_header_menu_icon" src={require('./images/menu_icon.png')} alt="small menu icon" onClick={this.opengdMenu} />
                     </div>
                 </div>
              </div>
            </div>
            );
        }
        else     //this part will render the header with the menu opened.
        {
            return(
        <div className="row">

              <div className=" col-md-12 col-xs-12 col-sm-12 gd_header_section body_fixed_content  hidden-xs hidden-sm">
                <div className="gd_header_collapsed_container" id="gd_header_collapsed_container">
                  <img className="gd_header_logo_icon" src={require('./images/GD_Logo_gray.png')} alt="gd gray logo" onClick={this.loadHomePage} />
                  <img className="gd_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="cross icon" onClick={this.opengdMenu} />
                  <div className="godocto_header_menu_option_div" onClick={this.openDesktopAboutusForm}>
                    <span><a className="gd_header_menu_option"> ABOUT US </a></span>
                  </div>
                  <div className="godocto_header_menu_option_div" onClick={this.openDesktopContactForm}>
                    <span><a className="gd_header_menu_option">CONTACT US</a></span>
                  </div>
                </div>
              </div>

             <div className="gd_small_header_collapsed_container col-xs-12 col-sm-12 col-md-12 visible-xs visible-sm" id="gd_small_header_collapsed_container">
                <div className="gd_small_header_collpased_menu_division">
                  <img className="gd_small_header_logo_icon2" src={require('./images/GD_Logo_gray.png')}  alt="gd small logo"  onClick={this.loadHomePage} />
                  <img className="gd_small_header_menu_close_icon" src={require('./images/cross_icon.png')} alt="gd small menu mobile"  onClick={this.opengdMenu} />
                </div>
                <div className="gd_small_header_menu_division">
                  <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
                    <span><a className="gd_small_header_menu_option">ABOUT US</a></span>
                  </div>
                  <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
                    <span><a className="gd_small_header_menu_option">CONTACT US</a></span>
                  </div>
                </div>
             </div>
       </div>

  );
  }
}
}



export default Header

when i clicked on menu then it caught error or i click whether about or contact same error will come in about us and contact component i render text simply but error was come in header component

there is only one state variable

Answer 1

The error you are having is on this part:

<div className="gd_small_header_menu_division">
                      <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopAboutusForm()">
                        <span><a className="gd_small_header_menu_option">ABOUT US</a></span>
                      </div>
                      <div className="gd_small_header_menu_option_division" onClick="openSmallDesktopContactForm()">
                        <span><a className="gd_small_header_menu_option">CONTACT US</a></span>
                      </div>
                    </div>

take a look at this part onClick="openSmallDesktopAboutusForm()" . You can write it like this onClick={openSmallDesktopAboutusForm()} just like what you did with your other methods.

As per the warning message, you can just change onclick on small caps, with onClick with the camel case.