SliderPicker throwing style error with ReactJS

Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + ‘em’}} when using JSX. in div (created by Slider) in Slider (created by ColorPicker) in ColorPicker (at App.js:392) in div (at App.js:385) in div (at App.js:164) in App (at src/index.js:7)

Code:

import React from 'react';
import './App.css'
import { SliderPicker } from 'react-color';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
sliderColor: {
        r: '255',
        g: '255',
        b: '255',
        a: '1',
      }
    };
  }

handleSliderChange = (color) => {
    this.setState({
     sliderColor: color.rgb
    })
 }

render() {
    return (
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
          }}
        >
          <SliderPicker
              color={ this.state.sliderColor }
              onChange={ this.handleSliderPickerChange }
          />
          <div 
            style={{
              backgroundColor: `rgba(${ this.state.sliderColor.r }, ${ this.state.sliderColor.g }, ${ this.state.sliderColor.b }, ${ this.state.sliderColor.a })`,
              borderRadius: "50%",
              width: "200px",
              height: "200px",
              marginRight: "50px"
            }}
          />
        </div>
      </div>
    );
  }
}

 export default App;

When I comment out the

<SliderPicker
     color={ this.state.sliderColor }
     onChange={ this.handleSliderPickerChange }
/>

the issue goes away.

[usamajamil006]

`<Modal.Content> <Label content="Primary Color" /> <SliderPicker/>

              <Label content="Secondary Color" />
              {/* <SliderPicker/> */}
          </Modal.Content>

` i am also getting same error on version “react-color”: “2.17.1” but when i down grade to 2.14.1 the error is gone the issue is with newer version

[casesandberg]

Apologies. Looks like the root package.json version didn’t get updated. This means I have been publishing versions under 2.16.X for the past few months. This has been fixed and deployed a new version at react-color@2.17.1