While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag.
<a onClick={() ={
navigate(`/products/${index.categoryname}/${subcat.categoryname}`, {state:{categoryid: subcat.categoryid, parentcategoryid: index.categoryid, showAll: false}});
}}>
If you require the entire loop code, here it is:
{categoryData.map((index, i) => {
return (
<li key={i}>
<a
className="sub-cat-hover"
target={i}
>
{index.categoryname}
</a>
<div
className="dropdown-menu-content sub-cat-list"
id={`div_${i}`}
>
<h4 className="title">Sub Categories</h4>
<ul className="dropdown-menu-list">
{index.children.map((subcat, j) => {
return (
<li key={j}>
<a onClick={() ={
navigate(`/products/${index.categoryname}/${subcat.categoryname}`, {state:{categoryid: subcat.categoryid, parentcategoryid: index.categoryid, showAll: false}});
}}>
<i className="fa fa-fw fa-angle-right text-muted">
{subcat.categoryname}
</i>
</a>
</li>
);
})}
</ul>
</div>
</li>
);
})}
I believe this approach should work but I am unsure where I may be making a mistake. Any feedback or suggestions would be greatly appreciated. Thank you