Shweta Singh Shweta Singh - 1 year ago 175
React JSX Question

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

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download