react-rangeslider: No longer working with React 15.3.2

This library used to work well in my application with React 15.1.0, but since I upgraded it no longer works. The page now crashes and here is the warning and error I get:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ....

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of ....

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 1
Comments: 16 (3 by maintainers)

Most upvoted comments

@edgehero Can you explain your solution? Here is what I have, which is not working:

class Volume extends Component {

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(volume){
        this.props.actions.changeVolume(volume);
    }

    render(){
        return (
            <div className="Volume">
                <div className="panel">
                    <div className="panel-body">
                        <h3>Current Volume: { this.props.app.volume }</h3>
                        <Slider
                            value={ this.props.app.volume }
                            orientation="horizontal"
                            step={ 1 }
                            min={ 0 }
                            max={ 31 }
                            onChange={ this.handleChange } />
                    </div>
                </div>
            </div>
        );
    }
}

whobutsb on Oct 20, 2016

= behind handleChange is not not expected

handleChange = (value) => { this.setState({ value: value })

how to solve this error

edgehero on Oct 20, 2016

With react-15.4.2 I get:

warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the MyPage component.

Seems like the onChange is invoked in a very early stage before component is mounted.

asaf on Jan 28, 2017

When developing with create-react-app (React 15.3.2, React Scripts 0.6.1), I have no issues, but when I build the project i’m running into the issue where after the mount the slider is stuck at 0 value and will not move. After I resize the window, i’m able to change the position of the slider.

whobutsb on Oct 14, 2016