how to use tailwind css for navbar and items show in loop-CodePudding

<div >
{categories?.data && 
categories.data.map((category) => (
<div key={category.id} onClick={ () => handleClick(category.id)} >
{category.name}
</div>

this is my code and needs to look category in the navbar

CodePudding user response：

Simple you switch out the tag for a tag, and the work with the tailwind classes on the navbar. Sample from the docs below.

Furthermore you need to return the jsx you want to display. See the sample below.

 <nav >
      {categories?.data && 
      categories.data.map((category) => (return(
      <div key={category.id} onClick={ () => handleClick(category.id)} >
      {category.name})
 </nav>

CodePudding user response：

<div>
{
  categories?.data && categories.data.map((category) => (
    <div key={category.id} onClick={ () => handleClick(category.id)} >
       {category.name}
    </div>
}
</div>

This should work!