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?
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>.