#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, Mar 21 '16 at 19:40
Ah yes, that was a typo. I have it like your example in my code. I will edit post — Kmoses, Mar 21 '16 at 19:52
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, Mar 22 '16 at 23:28

score 0 · Answer 1 · answered Mar 22 '16 at 22:28

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.

he's using an arrow function which wont create it's own 'this' but instead use 'this' of the component — Andrew Axton, Mar 22 '16 at 23:29

score 0 · Answer 2 · edited Mar 24 '16 at 12:07

0

maybe try this,

first of all make a var that contains this. this should happen in your render()

var self = this;

Then on your onClick

onClick={self.handleClick.bind(this)}

This worked for me when i ran into this problem.

Hope it works out!

edited Mar 24 '16 at 12:07

tweray

1,002
11
18

answered Mar 24 '16 at 11:12

Alaudes

1

score -1 · Accepted Answer · answered Mar 21 '16 at 20:41

-1

on the constructor: this.handleClick = this.handleClick.bind(this)

Then, in the render function:

onClick={()=>this.handleClick()}

answered Mar 21 '16 at 20:41

jgldev

191
11

Thanks for the reply. However, This still doesn't seem to work for me. No console logs firing, nothing. – Kmoses Mar 21 '16 at 20:50
maybe the onClick prop is onclick? – jgldev Mar 21 '16 at 20:54
doesn't seem to make a difference – Kmoses Mar 22 '16 at 02:06
the extra line in the constructor does not seem to make any sense. Your binding issue is inside the render function. – wintvelt Mar 22 '16 at 22:19

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

3 Answers3