Estoy tratando de hacer un menú desplegable con un componente de reacción y las etiquetas de anclaje no se procesan. Los anclajes deben estar en el menú desplegable cuando se hace clic, sin embargo, no aparecen. Si getItems() falla, el menú desplegable predeterminado debería decir cargando. ¿Alguna sugerencia sobre el menú desplegable?

desplegable.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;

¿Alguna razón por la que esto no funcionaría?