How to pass event in onClick in ReactJS

Question

I am trying to to call "preventDefault" in some manner on a custom component without success. Here are my attempts. The first attempt with "e" passes the element reference and not the actual event. The second method passes the event, but the prevent default method does not prevent anything. What is the best way to do this?

<MyComponent header= {
    <div onClick={e => { e.preventDefault(); myFunction.bind(this, event) }}>
       Header
    </div> 
} />

function myFunction(event) {
   event.preventDefault();
}

Answer 1

I would do it like this:

<MyComponent header={<div onClick={myFunction}>Header</div>} />

function myFunction(event) {
   event.preventDefault();
}

Or, if you need to use this in the click handler:

class App extends React.Component {
  myFunction = (event) => {
    event.preventDefault();
    this.setState({ clicked: true });
  }

  render () {
    return (
      <MyComponent header={<div onClick={this.myFunction}>Header</div>} />
    )
  }
}