Joshua Rajandiran Joshua Rajandiran - 4 months ago 36
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>


Basically
toBonusSummary
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
onclick
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:

<Ons.Splitter>
<Ons.SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={300}
collapse={true}
isSwipeable={true}
isOpen={this.state.menuOpen}//will open once you click the menu button
onClose={this.closeMenu}
onOpen={this.openMenu}
>
{/*Sidebar Content*/}
<Ons.Page renderToolbar={this.renderSidebar}>
{/*start of list*/}
<ons-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>
</ons-list>
{/*end of list*/}
</Ons.Page>
{/*End of Sidebar Content*/}
</Ons.SplitterSide>

{/*Page Content*/}
<Ons.SplitterContent>
<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={[]}/>
</Ons.Page>
</Ons.SplitterContent>
{/*End of Page Content*/}
</Ons.Splitter>


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

Any explanation why clicking an
ons-list-item
won't work in my case?

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

Answer

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

Comments