React / span with onClick event not in tag

Question

Something out of my knowledge is happening in my code. I have a component which renders a span tag with a onClick event:

<span style={styles.cursorPointer} onClick={this.handleClick}>{props.page.word}</span>

But when I check the code in the browser the span tag doesn't have the onClick:

developer tools screenshot of the code

I know it seems a little abstract but I just can't figure why the onClick isn't there.

Thanks.

Answer 1

You are confusing JSX with html. The span tag you have in your code is not plain html tag it is a javascript object(read more about jsx here). React takes care of binding the events for you, don't worry if you can't see onClick in your html.