Joshua Rajandiran Joshua Rajandiran - 1 year ago 100
React JSX Question

onClick not working in React when using Onsen List?

Here is my line of code that has a problem:

<ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item>

simply changes the state of the component itself, which is supposed to render a new content when clicking the list.

The problem I have right now is that I'm getting an Unexpected token of
error. I've tried changing the
to other functions and they're not working only in that line of code.

My guesses are that it has something to do with clicking an Onsen List.

Here is my whole code for the page anyway:

boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
isOpen={this.state.menuOpen}//will open once you click the menu button
{/*Sidebar Content*/}
<Ons.Page renderToolbar={this.renderSidebar}>
{/*start of list*/}
<ons-list-item onclick="fn.load('home.html')" tappable>Home</ons-list-item>
<ons-list-item onclick={this.toBonusSummary} tappable>Bonus Summary</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Sign Up</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Upgrade Package</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Group</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Finance</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Buy/Sell Credit</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Promo Pin Buy/Sell</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Information Centre</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>iChat</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Settings</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>Log Out</ons-list-item>
{/*end of list*/}
{/*End of Sidebar Content*/}

{/*Page Content*/}
<Ons.Page renderToolbar={this.renderToolbar}>
<PageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} name={this.state.username} data-defaultOption={'a'} value={'a'} data-error={'a'} data-options={[]}/>
{/*End of Page Content*/}

Still in development & mostly a lot of copy pasted code.

Any explanation why clicking an
won't work in my case?

PS: Those other onclick links doesn't work & is actually redundant.

Answer Source

React is case sensitive and in this case onclick should be with upper case C - onClick.