Empty string check on Input element value

Question

Why isn't my empty string check working as expected on an HTMLInputElement value property after trim? Problem code in storeOnEnter function. The goal is to only set new state when the input is empty.

import React, { Component } from 'react';

class ItemEditor extends Component {
    state = {
        showInput: true,
        itemDescription: ''
    }

    storeOnEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key !== 'Enter') return;

        const input = e.target as HTMLInputElement;
        if (!input.value.trim) return;

        this.setState({itemDescription: input.value, showInput: false})
    }

    switchToInput = (e: React.MouseEvent) => {
        this.setState({showInput: true});
    }

    render() {
        let input = <input type="text" onKeyPress={this.storeOnEnter} defaultValue={this.state.itemDescription}/>
        let label = <label style={{userSelect: 'none'}} onDoubleClick={(e) => this.switchToInput(e)}>{this.state.itemDescription}</label>

        return this.state.showInput ? input : label;
    }
}

export default ItemEditor;

Mosh Feu · Accepted Answer · 2019-02-24 20:15:24Z

2

trim is a function. That's why !input.value.trim is always truthy. Use !input.value.trim() instead.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

answered Feb 24, 2019 at 20:15

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gibrahh Over a year ago

Doh. Might have to stick to Kotlin after hours, stupid lack of sleep mistake wow... thank you

Mosh Feu Over a year ago

It happened to the best :)

Collectives™ on Stack Overflow

Empty string check on Input element value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related