#react-starter-kit React onClick not firing on page

Question

I'm using the React-Starter-Kit and am having an issue with an onClick={this.handleClick} not firing in the browser.

What is happening: The Colorswatches.js component is loading and showing up in the browser but the onClick isn't working. No console logs are showing up.

What I think is the problem: Rendering everything server side and passing to client, client gets static react html with no event bindings.

How do I get the click event to work client side after server side rendering?

EDIT: Updating code with provided example from jgldev

EDIT 2: Added componentDidMount() function. With a console log, still not seeing the log on page load

EDIT 3: My issued was with another part of the React-starter-kit that was bombing out the client side re-render. I marked the first answer as correct.

src/component/ColorSwatches/ColorSwatches.js:

import React, { Component, PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './ColorSwatches.scss';

class ColorSwatches extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    componentDidMount() {
        console.log('I was mounted');
    }
    handleClick(){
        console.log('I was clicked');
    }
    render(){
        let colorSlices = this.props.colorSlices;
        let sku = this.props.sku;
        let currentSkuIndex = 0

        return (
            <div className='pdpColors'>
                <div className='colorSwatches' >
                    { colorSlices.map((colorSlice, index) => {
                        return (
                            <div title={colorSlice.color} onClick={()=>this.handleClick()}  key={index}>
                                <img src={colorSlice.swatchURL}/>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export default withStyles(ColorSwatches,s);

this.handleClick().bind(this) is incorrect. try this.handleClick.bind(this) — azium
Ah yes, that was a typo. I have it like your example in my code. I will edit post — Kmoses
you also don't need the extra arrow function in onClick, all you need is onClick={this.handleClick}. It defeats the purpose of binding the function to the component and will instead create a new function every time it renders — Andrew Axton

wintvelt wintvelt · Accepted Answer · 2016-03-22T22:28:34

My guess is that the following is going on:

Originally, this referred to the mounted DOM component, which is not what you want.
Wrapping the onClick to onClick={()=>this.handleClick()} is a step in the right direction, but not enough. this now refers to a react component, but not the right one. It is defined inside a .map function, so it refers to the colorSlice. Which is not what you want.

My advice take it one step further:

inside render, before your return statement, add the following line

let that = this; // this refers to ColorSwatches component, as intended

and inside the mapping function change onClick to:

onClick={that.handleClick}  // no need to add the wrapper now

Hope this helps.

#react-starter-kit React onClick not firing on page

3 Answers