Cannot read property 'r' of undefined

[japgolly]

This looks fantastic on the demo page but is anyone using this outside of the demo?

The simplest thing possible doesn't work for me:

  render() {
    return <ChromePicker />;
  }

fails with

Chrome.js:96 Uncaught TypeError: Cannot read property 'r' of undefined
    at Chrome (Chrome.js:96)

which checks out looking at the source.

The documentation doesn't help. It says it should work. In fact hardly any of the documentation seems correct...

• ChromePicker doesn't accept a color arg in reality where as the docs say it does
• ChromePicker seems to want to want rgb, hsl, hsv, hex etc - hopefully I'm misunderstanding something as I expect just specifying one should be enough?

If anyone's using this for real surely surely you must have come across these issues, or have somehow avoided them. Pls help?

[Pushplaybang]

hey there,

using the ChromePicker just fine parsing in a hex val.

<ChromePicker color={color} onChangeComplete={handleChange} />

where color is something like '#f7f7f7`

[japgolly]

Hey, thanks for the response! I was starting to feel like I'm going crazy or doing something very wrong.

Can I ask what version of React you're using?

[Pushplaybang]

sure:

"react": "^16.12.0",
"react-color": "^2.18.0",
"react-dom": "^16.12.0",

[casesandberg]

Were you able to get this working? I cant seem to reproduce this error on my end.

[edsel77]

vue-color's color variable object key 'r' is searching for the valid value I've got the same error and fixed it by assigning the correct response data

Incorrect assignment: this.color= response

Correct assignment: this.color= response.MyRGBColorData

[R4VANG3R]

Were you able to get this working? I cant seem to reproduce this error on my end.

The ChromePicker will work but any of the helper components will give this error. See: https://codesandbox.io/s/stoic-microservice-pmlli?file=/src/App.js

[GalaxySystem]

I don't know why either, i met this problem when i used Saturation.

[GalaxySystem]

It's the same as using Saturation, it receives a string | rgbColor | hslColor, but if i set a string value, it get wrong with that error

[flahtorres]

Same problem here, I'm using react-color with @material-ui/core (the 4 version of mui) and the Saturation component

I was getting the error "TypeError: Cannot read property 'h' of undefined". So I look into the code and there's a line that is trying to find the h s and l properityies inside the props object

background: 'hsl(' + this.props.hsl.h + ',100%, 50%)',

I had tried to force pass the props to Saturation, but I got "Uncaught TypeError: Cannot add property updater, object is not extensible"

`

`

my handleChangeColor is a useCallback to parse the color inside the event to a hex+a notation. I had tryied to use rgba too, but same error

currentColor is the hex+a state color