edit: including codepen:
<https://codepen.io/hugerobots/pen/YeMWbY?editors=1010>

Following is a pretty simple exercise in mapping database items to output into a `<ul>` per child database item.

The error after rendering (everything works until I implement the `map` below).

> 
> Uncaught TypeError: Cannot read property 'map' of undefined
> 
> 
> 

The example I'm following along with is a few years old, so there might be some changes to what I'm following, with caveats to updated instruction from the actual Firebase documentation.
<https://css-tricks.com/firebase-react-part-2-user-authentication/>

Where I'm getting turned around is probably the repetition of using `items` and `item` in reference to the actual items in the database and use of the term in the code below.

```
handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('vendors');
    const item = {
        name: this.state.user.displayName || this.state.user.email,
        email: this.state.user.email,
        vendorName: this.state.user.vendorName,
        vendorType: this.state.user.vendorType
    }
    itemsRef.push(item);
    this.setState({
        username: '',
        email: '',
        vendorName: '',
        vendorType: ''
    });
}

componentDidMount() {
    // retrieve data
    const itemsRef = firebase.database().ref('vendors');
    itemsRef.on('value', (snapshot) => {
        let items = snapshot.val();
        let newState = [];
        for (let item in items) {
            newState.push({
                id: item,
                name: items[item].username,
                email: items[item].email,
                vendor: items[item].vendorName,
                vendtype: items[item].vendorType
            });
        }
        this.setState({
            items: newState
        });
    });
}

```

And the problem `map`:

```
<ul>
{this.state.items.map((vendors) => {
    return (
        <li key={vendors.id}>
        <h2>{vendors.name}</h2>
        <p>Vendor Name: {vendors.vendorName}
            {vendors.name === this.state.user.username || vendors.user === this.state.user.email ?
                <button onClick={() => this.remoteItem(vendors.id)}>Remove Item</button> : null}
            </p>
        </li>
    )
})}
</ul>

```