onClick not working in React when using Onsen List?

Question

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 1

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