Pop up alert when input is empty in react

Question

I have asked this question many times here but didn't get the answer properly or any complete result. i need to validate my input or i can do that when my input tag is empty or when there is no number in the input, the alert should pop up. I tried for an alert but don't know why it is not working. Please help i'm stuck in this since a week.

Code:

<script type="text/jsx">
        var styles = {
            margin: '2em auto',
            width: '300px',
            height: '300px',
            backgroundColor: '#DD4814',
            color: '#ffffff',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'space-around'
        };
        var inputs = {
            position: 'relative',
            bottom: '17%',
            left: '20%'
        }
        var btns = {
            position: 'relative',
            bottom: '7%'
        }
        var btn = {
            backgroundColor: '#ffffff',
            color: '#000000',
            borderColor: '#DEB887',
            borderRadius: '0.4em',
            cursor: 'pointer',
            margin: '0 1em',
            padding: '0.5em',
            display: 'inline-block'
        }
        var required = true;
        class Timer extends React.Component {
            constructor (props) {
                super(props)
                this.state = {count: 0, customNumber: 0}

            }
                handleChange (e) {
                    this.setState({ customNumber: e.target.value});
                }
                componentWillUnmount () {
                    clearInterval(this.timer)
                }
                tick () {
                    if (this.state.customNumber) {
                    this.setState({
                        count: (this.state.customNumber--)
                    })
                    if (this.state.customNumber <= 0) {
                        this.setState({ count: 0})
                        clearInterval(this.timer)
                        this.setState({ disabled: false })
                    }
                    } else {
                        this.setState({count: (this.state.count - 1)})
                    }
                }

                display () {
                    return ('0' + this.state.count % 100).slice(-2)
                }

                startTimer () {
                    if ((this.state.inputValue == " ") && isNaN(this.state.inputValue))
                    {
                        alert("Please give some value in number");
                    }
                    clearInterval(this.timer)
                    this.timer = setInterval(this.tick.bind(this), 1000)
                    this.setState({ disabled: true })
                }
                stopTimer () {
                    clearInterval(this.timer)
                }
                resetTimer () {
                    clearInterval(this.timer)
                    this.setState({count: 0})
                    this.setState({ disabled: false })
                }
                render () {
                    return (
                    <div style={styles} className='timer'>
                        <h1 style={{fontSize: '4em'}}>{this.display()}</h1>
                        <div className="input_text" style={inputs}>
                            <label htmlFor="custom_number">Enter number to start timer</label>
                            <input type="text" name="custom_number" id="custom_number" required={required} value={this.state.inputValue} onChange={this.handleChange.bind(this)} disabled={this.state.disabled}  placeholder="Enter b/w 1-100" />
                        </div>
                        <div style={btns} className="buttons">
                            <button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button>
                            <button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button>
                            <button style={btn} type="button" name="reset_btn" id="reset_btn" onClick={this.resetTimer.bind(this)}>Stop</button>
                        </div>
                    </div>
                    )
                }
                }
                ReactDOM.render(
                <Timer />,
                document.getElementById('root')
                )
        </script>
    <div id="root"></div>

Answer 1

First thing, using alerts is not the best way to get the user's attention. console.log() is much more effective if all you are doing is debugging your code

Second thing, you are asking for alerts in a timer loop - you could end up with hundreds of alerts this way (refer to my first point)

Third thing, you are checking the value of this.state.inputValue and comparing it to a string containing one space ( " " ) which doesn't seem right

Fourth thing, you are setting the value of your input field with this:

value={this.state.inputValue}

This basically means the value of the field is set and can't be changed. You probably want to use defaultValue instead

Five, and I'm stopping here, your handleChange method doesn't even set the state, so you will never get what you want anyway.