This is the current code, when I load the list page, for a moment it says "No List Items Found", it then loads the items from the backend api afterwards and shows those items (the above message dissapears)

```
import React, { Component } from 'react';

class List extends Component {

    // Initialize the state
    constructor(props){
        super(props);
        this.state = {
            list: [],
            isFetchedFromServer:false
        }
    }

    // Fetch the list on first mount
    componentDidMount() {
        this.getList();
    }

    // Retrieves the list of items from the Express app
    getList = () => {
        fetch('/api/getList')
            .then(res => res.json())
            .then(list => this.setState({ list }))
            .then(this.state.isFetchedFromServer= true)
    }

    render() {
        const { list } = this.state;

        return (
            <div className="App">
            <h1>List of Items</h1>
        {/* Check to see if any items are found*/}
        {list.length ? (
            <div>
            {/* Render the list of items */}
            {list.map((item) => {
                    return(
                        <div>
                        {item}
                        </div>
                );
                })}
            </div>
        ) : (
        <div className={((this.state.list != undefined) &&( this.state.list != null)) ? '' : 'hidden'}>
        <h2>No List Items Found</h2>
        </div>
        )
        }
    </div>
    );
    }
}

export default List;

```

I would like to only see no list items found when it has returned from the backend call empty.

Please assist me in doing so.