Handling React onToggle event - reactjs

Question

I am working on the below snippet, and I'd like to find out why I am not able to bind onToggle event with button component. I am getting 'onToggle' is not defined on compiling.
In the main container (Content) I have:
class Content extends Component {
constructor() {
super();
this.state = {
user: dataService.User
}
}
onTogglePane(){
var node = ReactDOM.findDOMNode(this.refs.wrapper);
node.classList.toggle('toggled');
}
onSignOut() {
dataService.Logout((result) => {
this.setState({
user: null
})
});
}
render() {
return (
<div>
<Header
onClick = {this.onSignOut}
onToggle ={this.onTogglePane}
/>
</div>
)
}
}
In the Button.js I have button component as:
import React from 'react';
const Button = ({ text, styleClass, onClick }) => {
return (
<button
type="button"
onClick={e => onClick(e)}
onToggle={e => onToggle(e)}
className={`btn ${styleClass}`}
>
{text}
</button>
);
};
export default Button;
and finally in the Header.js I have
import React from 'react';
import Button from 'components/Button';
class Header extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<nav className="navbar navbar-default hk-navbar fixed-top">
<p className="navbar-brand tk-brand">App</p>
<Button
text={[<i class="icon icon-logout"></i>, " Sign Out"]}
onClick = {(e) => this.props.onClick(e)}
styleClass = 'btn-control'
/>
<Button
text={[<i class="icon icon-logout"></i>, " Full Screen"]}
onToggle = {(e) => this.props.onToggle(e)}
styleClass = 'btn-control'
/>
</nav>
);
}
}
export default Header;
Now I am getting this error:
Failed to compile
./src/components/Button.js
Line 8: 'onToggle' is not defined no-undef
Search for the keywords to learn more about each error.

Answer 1

Try this, you are missing onToggle which you are passing it to Button component.
Below Button component code would fix the issue
import React from 'react';
const Button = ({ text, styleClass, onClick, onToggle }) => {
return (
<button
type="button"
onClick={onClick ? onClick: null}
onToggle={onToggle ? onToggle: null}
className={`btn ${styleClass}`}
>
{text}
</button>
);
};
export default Button;