How to do dropdowns with React-CodePudding

I'm trying to make a dropdown with a react component and the anchor tags do not render. The anchors should be on the dropdown when clicked, however they don't appear. If getItems() fails, the default dropdown should just say loading. Any suggestions about the dropdown?

Dropdown.js

<li className="nav-item dropdown">
  <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img src={shoppingCart} alt="shopping cart" className="" style={{ width: "30px", height: "30px"}}></img>
  </a>
  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
    <CartItems></CartItems>
  </div>
</li>

CartItems.js

export default function CartItems() {

    const { currentUser } = useAuth();
    const [itemsRef, setItemsRef] = useState([]);


    async function getItems() {
        if(currentUser !== null) {
            const q = query(collection(db, currentUser.uid));
            console.log('q', q);
            const querySnapshot = await getDocs(q);
            console.log("snapshot", querySnapshot);
            setItemsRef(querySnapshot);
            console.log('items', itemsRef)
            querySnapshot.forEach((doc) => {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
            });
        }
       
    }

    useEffect(() => {
        getItems();
    }, [])

    if(itemsRef !== undefined && itemsRef !== null && itemsRef.length !== 0) {
    return(
        <>
            {
                itemsRef.forEach((item, index) => {
                    return <CartItem key={index} item={item} />
                })
            }
        </>
    );
    } else {
        return <a className="dropdown-item" href="#">Loading Cart...</a>
    }
}

CartItem.jsx

class cartItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }
    render() { 
        return <a className="dropdown-item" href="#">
            <img src={this.props.item.image} style={{width: "10px", height: "17px"}}></img>
            <p>{this.props.item.title}</p>
            <button ></button>
        </a>
    }
}
 
export default cartItem;

Any reason this wouldn't work?

CodePudding user response：

The problem is that querySnapshot is an object and needs to be converted into an array.

async function getItems() {
        if(currentUser !== null) {
            const q = query(collection(db, currentUser.uid));
            console.log('q', q);
            const querySnapshot = await getDocs(q);
            console.log("snapshot", querySnapshot);
            
            let array = [];
            querySnapshot.forEach((doc) => {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
                array.push(doc.data());
            });
            // console.log(array);
            setItemsRef(itemsRef => [...itemsRef, array]);
            console.log('items', itemsRef);
        }
       
    }

And the dropdown need to be done with react bootstrap

import Dropdown from 'react-bootstrap/Dropdown'

<Dropdown.Menu>
    <CartItem />
</Dropdown.Menu>

Where CartItem countains a <Dropdown.Item>.