如何防止在反应代码中添加空任务？

Question

I would like to prevent my application to prevent adding empty task. Following the code which adds new task in an array. May I ask please how to put condition to prevent adding empty task?

The application is built on Mozilla's guideline for the react app.

import React, {useState} from 'react';

function Form(props){
    const [name, setName ] = useState('');
    const [important, setImportant] = useState(false);
    
    function handleChangeImportant(e){
        console.log(e);
        e.preventDefault();
        setImportant(e.target.checked);
    };
    
    function handleChange(e) {
        setName(e.target.value);
    }

    function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        props.addTask(name);
        setName("");
    }    
    return(
        <form onSubmit={handleSubmit}> 
            <h2 className="label-wrapper">
                <label htmlFor="new-todo-input" className="label__lg">
                    What needs to be done?
                </label>
            </h2>
            
            <input 
                type="text"
                id="new-todo-input"
                className="input input__lg"
                name="text"
                autoComplete="off"
                value={name}
                onChange={handleChange}                
            />
            
            <input
                type="checkbox"
                id="todo-0" 
                value={important}
                onChange={handleChangeImportant}                             
            /> Important
            
            <button type = "submit" className="btn btn__primary btn__lg">
                Add
            </button>
        </form>
    );
}

export default Form;

```

Answer 1

Check if name is not empty.

   function handleSubmit(e){
        e.preventDefault();
        //alert('Moin');
        if(name !==''){
        props.addTask(name);
        setName("");
     }
    }   

Answer 2

function handleSubmit(e) { e.preventDefault(); if (name === '') return; props.addTask(name); setName(''); }