CODEWITHSUNDEEP
javascripthtmlreactjsjsx
dfranca
dfranca

Reputation: 5322

ReactJS "eating" my onClick attribute

I'm doing a ReactJS web app, and everything seems to be doing good... except for one silly thing that I can't figure out why is happening.

I'll try to reduce to the minimum implementation necessary.

I've an Item component: http://pastebin.com/P8T6vAhR

A container, which renders the List and defines the function properly: http://pastebin.com/GmyrnY2c

And a List component which renders each of the items and pass the function as a parameter (after receives it from the Container): http://pastebin.com/6cwPCJhn

The function seems to be fine, and I can see that the function is there when I ask for log it on the console.

But then what I got rendered instead is:

<button class="ui">My Category</button>

Hey, where's the onClick attribute? It's gone... no idea why. Probably is some stupid mistake or misunderstanding about the magic behind JSX, but I can't find the problem... specially because I use similar things on other parts of my code, and everything else is working nicely.

I appreciate any help.

Upvotes: 0

Views: 109

Answers (1)

basarat
basarat

Reputation: 275819

Hey, where's the onClick attribute

The attribute is just converted to a property that gets passed to the component.

The dom onclick is not the same as the component prop (react does fancy event delegation which performs better and doesn't suffer from onclick global scope).

Upvotes: 2

Related Questions