Usage with classes?

[matronator]

Hi, is it possible to use this with classes? When I put this into a class with onChange={this.changeColor} the whole page turns completely white as soon as I click on any color and some errors pop-up in the console.

[omgovich]

Hi! I'm pretty sure that the component works inside class components. Please share your changeColor code.

[matronator]

Nevermind, I got it working. I don't know why, but adding the onChange as a reference to a class function (like in the original comment onChange={this.onChange}) just kept crashing. I finally got it to work when I inlined the entire function, so it looks like this:

<PopoverPicker
  color={this.state.preview.color}
  selectValue={this.state.preview.style}
  onChange={(color: string) => this.setState({ preview: { ...this.state.preview, color: color }})}
/>

Can't figure out why it only seems to work when it's inlined like this, though.

[omgovich]

My guess: it loses this context. Try:

- onChange={this.changeColor}
+ onChange={this.changeColor.bind(this)}

or make changeColor an arrow method:

- changeColor(color: string) {
+ changeColor = (color: string) => {