I'm encountering an issue where only the last item of the navbar is being rendered even though the data appears to be correct. I've tried hard coding the data into the components but the same error persists.https://i.sstatic.net/ccEuB.png , https://i.sstatic.net/lCJ3o.png.
//Navbar component
import React from "react";
import { Link } from "react-router-dom";
import Dropdown from "./Dropdown";
import "./style/navbar.css";
const Navbar: React.FC = () => {
const npflDropdownItems = [
"Home",
"Fixtures",
"Results",
"Tables",
"Transfer",
"Stats",
"Video",
"Watch Live",
"Clubs",
"Players",
"Awards",
];
const aboutDropdownItems = ["Overview", "What We Do", "Careers", "Partners"];
const moreDropdownItems = ["Managers", "Referee", "e-NPFL", "Contact Us"];
console.log(npflDropdownItems, aboutDropdownItems, moreDropdownItems);
return (
<nav className="navbar">
<div className="logo-container">
<img className="logo" src="path-to-your-logo.png" alt="Logo" />
</div>
<div className="navbar-dropdown">
<div className="navbar-item npfl">
Npfl
<Dropdown items={npflDropdownItems} />
</div>
</div>
<div className="navbar-dropdown">
<div className="navbar-item about">
About
<Dropdown items={aboutDropdownItems} />
</div>
</div>
<div className="navbar-dropdown">
<div className="navbar-item more">
More
<Dropdown items={moreDropdownItems} />
</div>
</div>
</nav>
);
};
export default Navbar;
//Dropdown component
import React from "react";
import { Link } from "react-router-dom";
interface DropdownProps {
items: string[];
}
const Dropdown: React.FC<DropdownProps> = ({ items }) => {
return (
<div className="navbar-dropdown">
{items.map((item, index) => (
<div key={index} className="navbar-item-dropdown">
{item}
</div>
))}
</div>
);
};
export default Dropdown;
`
`/* Navbar.css */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
color: #fff;
}
.logo-container {
max-width: 100px;
}
.logo {
width: 100%;
height: auto;
}
.navbar-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-item {
margin-right: 10px;
cursor: pointer;
color: #fff;
text-decoration: none;
}
.navbar-dropdown {
position: relative;
z-index: 2;
}
.navbar-item-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
padding: 10px;
width: 150px;
z-index: 1;
}
.navbar-dropdown:hover .navbar-item-dropdown {
display: block;
}
.fantasy,
.more {
cursor: pointer;
}
@media (max-width: 768px) {
.navbar-menu {
flex-direction: row;
align-items: flex-start;
}
.navbar-item,
.fantasy,
.more {
margin: 5px 0;
}
.navbar-dropdown .navbar-item {
width: 100%;
}
}
`
I expect all dropdown items to be displayed when clicked or hovered.
Thanks in advance