Event Handler on component in Reactjs - reactjs

Question

This is not firing on the component but when I attach my event handler to a div it works. Do I need to pass a prop types function in my child component?
const buttonStyle = {
color: 'red'
};
class Button extends React.Component {
render() {
return (
<a className="social-button twitter">
<i href="#" className="fa fa-twitter"></i>
</a>
)};
}
class PanelButtons extends React.Component {
constructor(props){
super(props);
}
handleClick() {
console.log('this is:');
}
render() {
return (
<div>
<div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
CLick me
</div>
<div className="social-buttons">
<Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
</div>
</div>
)
}
}
ReactDOM.render(<PanelButtons />, document.querySelector('body'));

Answer 1

What you did basically, is passing a callback called onClick to the Button component. It will be accessible to you through the component's props.
class Button extends React.Component {
render() {
return (
<a className="social-button twitter" onClick={this.props.onClick}>
<i href="#" className="fa fa-twitter"></i>
</a>
)};
}
once the Button component's a element is clicked, the callback that you passed will be triggered (and handleClick will be called).

Answer 2

You should pass down the props into <Button /> component
class Button extends React.Component {
render() {
return (
<a className="social-button twitter" {...this.props}>
<i href="#" className="fa fa-twitter"></i>
</a>
)};
}
More reading: JSX spread attributes

Answer 3

An onClick on a <button /> would have worked as you expected.
But this is <Button /> a component which you created, the onClick will be sent as props which you can invoke through an onClick on the Button component's a tag like below, whose handleClick will callback the actual onClick on your PanelButtons component.
const buttonStyle = {
color: 'red'
};
class Button extends React.Component {
handleClick = (e) => {
this.props.onClick(e)
}
render() {
return (
<a className="social-button twitter" onClick={this.handleClick}>
<i href="#" className="fa fa-twitter"></i>
</a>
)};
}
class PanelButtons extends React.Component {
constructor(props){
super(props);
}
handleClick() {
console.log('this is:');
}
render() {
return (
<div>
<div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
CLick me
</div>
<div className="social-buttons">
<Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/}
</div>
</div>
)
}
}
ReactDOM.render(<PanelButtons />, document.querySelector('body'));
If you just want to add an onClick in the PanelButtons for each button, just modify your render a little bit like this by adding event listener on the div tag.
render() {
return (
<div>
<div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/}
CLick me
</div>
<div className="social-buttons" onClick={(e) => this.handleClick(e)}>
<Button />{/*does now work attaching it to a component*/}
</div>
</div>
)
}