Repository: plotly/dash
File: components/dash-core-components/src/components/Input.react.js (JavaScript)

Code before:

    componentDidMount() {
        const {value} = this.input.current;
        const valueAsNumber = convert(value);
        this.setInputValue(
            isNil(valueAsNumber) ? value : valueAsNumber,
            this.props.value
        );
    }

    UNSAFE_componentWillMount() {
        if (this.props.type !== 'number') {
            this.setState({value: this.props.value});
        }
    }

    render() {
        const valprops =
            this.props.type === 'number' ? {} : {value: this.state.value};
        const {loading_state} = this.props;
        return (
            <input
                data-dash-is-loading={
                    (loading_state && loading_state.is_loading) || undefined
                }
                className={['dash-input', this.props.className].join(' ')}
                ref={this.input}
                onBlur={this.onBlur}
                onChange={this.onChange}
                onKeyPress={this.onKeyPress}
                {...valprops}
                {...omit(
                    [
                        'className',
                        'debounce',
                        'value',
                        'n_blur',
                        'n_blur_timestamp',
                        'n_submit',
                        'n_submit_timestamp',
                        'selectionDirection',
                        'selectionEnd',
                        'selectionStart',
                        'setProps',
                        'loading_state',
                    ],
                    this.props
                )}
            />
        );
    }

Review comment (suggestion):
This still puts an empty space at the end if undefined. The most proper way I can see to do it, would be to instantiate an array with `['dash-input']` and add `className` if not undefined then join the array. A filter is probably enough for such a case with only 2 elements.

Or a ternary is also pretty good:

```js
`dash-input${this.props.className ? " " + this.props.className : ""}`
```

Code after:
        }
        const valueAsNumber = convert(value);
        this.setInputValue(
            isNil(valueAsNumber) ? value : valueAsNumber,
            nextProps.value
        );
        if (this.props.type !== 'number') {
            this.setState({value: nextProps.value});
        }
    }

    componentDidMount() {
        const {value} = this.input.current;
        const valueAsNumber = convert(value);
        this.setInputValue(
            isNil(valueAsNumber) ? value : valueAsNumber,
            this.props.value
        );
    }

    UNSAFE_componentWillMount() {
        if (this.props.type !== 'number') {
            this.setState({value: this.props.value});
        }
    }

    render() {
        const valprops =
            this.props.type === 'number' ? {} : {value: this.state.value};
        const {loading_state} = this.props;
        let {className} = this.props;
        className = 'dash-input' + (className ? ` ${className}` : '');
        return (
            <input
                data-dash-is-loading={
                    (loading_state && loading_state.is_loading) || undefined
                }
                className={className}
                ref={this.input}
                onBlur={this.onBlur}
                onChange={this.onChange}
                onKeyPress={this.onKeyPress}
                {...valprops}
                {...omit(
                    [
                        'className',
                        'debounce',
                        'value',
                        'n_blur',
                        'n_blur_timestamp',
                        'n_submit',