Don't map a list if it's undefined

Question

In the following snippet I define a list and an object state. The object that changes according to the input adds the value of the current object to the list as soon as the button is clicked. However, what I want to do here is that when the list is empty, the div is not created and the map function does not work. You will see below that I tried to solve this using the ternary operator, but I couldn't.

view of the main app

function Form() {
    let key = 1
    const [userInput, setUserInput] = useState({
        enteredName: '',
        enteredAge: '',
        key: key
    })
    const [data, setData] = useState([{}]);
    const nameChange = (e) => {
        setUserInput({ ...userInput, enteredName: e.target.value });
    }
    const ageChange = (e) => {
        setUserInput({ ...userInput, enteredAge: e.target.value });
    }
    const pompa = (e) => {
        e.preventDefault();
        setData((prev) => {
            return [userInput, ...prev]
        })
        key++;
        setUserInput({ ...userInput, enteredName: "", enteredAge: "" });
    }

    return (
        <div>
            <form>
                <div className="form">
                    <label>Username</label>
                    <br />
                    <input className="input" type="text" required value={userInput.enteredName} onChange={nameChange}></input>
                    <br />
                    <label>Age</label>
                    <br />
                    <input className="input" type="text" value={userInput.enteredAge} onChange={ageChange}></input>
                    <br />
                    <br />
                    <button className="button" onClick={pompa}> Add User</button>
                </div>
            </form>
            <br />
            {data === undefined ? console.log("Empty") :
                <div id="liste">
                    <ul>
                        {data.map((number) =>

                            <li key={number.id}>
                                <div>{number.enteredName + " "}{number.enteredAge}</div>
                            </li>
                        )}
                    </ul>
                </div>
            }
        </div>
    );
}

Answer 1

Your state is an array of objects, you just need to check the length of that array like this and remove the empty object {} of your initial state value:

function Form() {
    let key = 1
    const [userInput, setUserInput] = useState({
        enteredName: '',
        enteredAge: '',
        key: key
    })
    const [data, setData] = useState([]);
    const nameChange = (e) => {
        setUserInput({ ...userInput, enteredName: e.target.value });
    }
    const ageChange = (e) => {
        setUserInput({ ...userInput, enteredAge: e.target.value });
    }
    const pompa = (e) => {
        e.preventDefault();
        setData((prev) => {
            return [userInput, ...prev]
        })
        key++;
        setUserInput({ ...userInput, enteredName: "", enteredAge: "" });
    }

    return (
        <div>
            <form>
                <div className="form">
                    <label>Username</label>
                    <br />
                    <input className="input" type="text" required value={userInput.enteredName} onChange={nameChange}></input>
                    <br />
                    <label>Age</label>
                    <br />
                    <input className="input" type="text" value={userInput.enteredAge} onChange={ageChange}></input>
                    <br />
                    <br />
                    <button className="button" onClick={pompa}> Add User</button>
                </div>
            </form>
            <br />
            {data.length > 0 ?
                <div id="liste">
                    <ul>
                        {data.map((number) =>

                            <li key={number.id}>
                                <div>{number.enteredName + " "}{number.enteredAge}</div>
                            </li>
                        )}
                    </ul>
                </div>
            : console.log("Empty")}
        </div>
    );
}

Answer 2

By calling useState([{}]) you initialize data with an array with one empty object, so data === undefined will never yield true.

Instead initialize it with an empty array with useState([]) and check against data.length === 0.