React-color: Changing any state inside function for "onChange" freezes the react-color UI

[YashalShakti]

If I add any "this.setState({test:color});" like function inside handle click the UI freezes and

1. The white pointer does not move
2. The colors dont change

I get the correct value for colors but it is not visually reflected on the color picker.

Removing this.setState and logging using console.log does the job.

constructor(props) {
    super(props);
    this.state = {displayColorPicker: false, test:"" };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleChangeComplete = this.handleChangeComplete.bind(this);
  }

handleClick() {
      this.setState({ displayColorPicker: !this.state.displayColorPicker });
    }

handleClose() {
      this.setState({ displayColorPicker: false });
    }

handleChangeComplete(color){
    this.setState({test:color}); // removing this line makes it work
    console.log(color);
    }

<ColorPicker display={ this.state.displayColorPicker } onChange={ this.handleChangeComplete } onClose={ this.handleClose } type="chrome" />```

[casesandberg]

I dont see why this would be causing the UI to freeze. Are you still having this issue?

[katemont]

@YashalShakti I had this issue also - try adding color={ this.state.color } to ColorPicker

[freddyrangel]

I had this problem as well. The problem is that when you change the color, setState is being called on the parent component, triggering a re-render of the child components, including the ColorPicker. The ColorPicker components is tracking the selected color in its interval state, so when it's re-rendered ColorPicker loses that state, giving the appearance that it's not responding. That's why you need to pass color={this.state.color}.