OnClick not triggering in nextjs 13 with app route
Unanswered
West African Lion posted this in #help-forum
West African LionOP
I am creating a navbar component in which I have different tab, on clicking , each tab should be selected., i have the map function for the tabs like {tabsData.map((tab) => (
<div style={Tab}
key={tab.id}
selected={selectedTab === tab.id}
onClick={() =>handleTabClick(tab.id)}
>
<a style={tabItem} >{tab.label}</a>
{selectedTab === tab.id && (
<div style={tabIndicator} selected={selectedTab === tab.id} />
)} inside this I had defined the onClick function, the function is defined like below const handleTabClick = (tabId) => {
console.log("tab clicked",tabId)
setSelectedTab(tabId);
};
but the above code snippet is not working with nextjs 13. please help me out
<div style={Tab}
key={tab.id}
selected={selectedTab === tab.id}
onClick={() =>handleTabClick(tab.id)}
>
<a style={tabItem} >{tab.label}</a>
{selectedTab === tab.id && (
<div style={tabIndicator} selected={selectedTab === tab.id} />
)} inside this I had defined the onClick function, the function is defined like below const handleTabClick = (tabId) => {
console.log("tab clicked",tabId)
setSelectedTab(tabId);
};
but the above code snippet is not working with nextjs 13. please help me out
1 Reply
Tomistoma
1. Why is there an anchor tag without href?
2. Try to create components. For example, a Tab component (why did you call the style Tab? Name it tabStyle or something else, leave names starting with uppercase for components)
3. Pass the selected attribute as a prop the the Tab component
2. Try to create components. For example, a Tab component (why did you call the style Tab? Name it tabStyle or something else, leave names starting with uppercase for components)
3. Pass the selected attribute as a prop the the Tab component