Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SliderPicker throwing style error with ReactJS

See original GitHub issue

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)


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

class App extends React.Component {
    this.state = {
sliderColor: {
        r: '255',
        g: '255',
        b: '255',
        a: '1',

handleSliderChange = (color) => {
     sliderColor: color.rgb

render() {
    return (
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
              color={ this.state.sliderColor }
              onChange={ this.handleSliderPickerChange }
              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"

 export default App;

When I comment out the

     color={ this.state.sliderColor }
     onChange={ this.handleSliderPickerChange }

the issue goes away.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

usamajamil006commented, Apr 19, 2019

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

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

` 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

casesandbergcommented, Apr 20, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Slick prev and next methods throw an error
I get the following error as the code is written:(same for this.slider inside Slider Component). enter image description here.
Read more >
React Color
In this case, the color picker will initialize with the color #fff . When the color is changed, handleChangeComplete will fire and set...
Read more >
Solving the React Error: Not Picking Up CSS Style | Pluralsight
In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.
Read more >
Development Tools for Building and Compiling Your Reactjs ...
Provides development tools for ReactJS based projects with Webpack4 and JEST. Installation. $ npm i --save @amjs/react-tools. Usage. Add following scripts to ...
Read more >
Error Boundaries - React
Event handlers (learn more) · Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) · Server side rendering · Errors thrown in the error boundary ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found