react-input-range icon indicating copy to clipboard operation
react-input-range copied to clipboard

[Question] Error when using in stateless component

Open JonWallsten opened this issue 8 years ago • 1 comments

Sorry for any terminology errors. I'm trying to use this in a stateless component using latest React and TypeScript. However I get this error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `StatelessComponent`.

Am I doing something wrong, or do you need a React component to use this?

Thanks!

Edit: I might add I get the same issue when using it inside a normal React component as well.

JonWallsten avatar Aug 17 '17 08:08 JonWallsten

I'm getting the same issue in a normal component (which is called from a StatelessComponent)

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `DistanceInput`.
import * as React from "react";
import InputRange from "react-input-range";

interface DistanceInputProps {}

interface DistanceInputState {
    value: number;
}

export default class DistanceInput extends React.Component<DistanceInputProps, DistanceInputState> {
    constructor(props) {
        super(props);

        this.state = {
            value: 50
        };
    }

    public render() {
        return (
            <div>
                <InputRange
                    maxValue={100}
                    minValue={10}
                    value={this.state.value}
                    onChange={(value: number) => this.setState({ value })}
                />
            </div>
        );
    }
}

hisuwh avatar Nov 17 '17 14:11 hisuwh