CODEWITHSUNDEEP
reactjs
Muhammad Shafique Attari
Muhammad Shafique Attari

Reputation: 105

how to display items with category name as title

hi I have multiple items with different categories. I want to display all item with its Category name as a title at header. My code displaying each item but category Title repeats with each item. I want Category title only one time at the top and then its items list. MY Code is this

{                               
  formsList.map((item, index,temp=0) => {
    if(temp!==item.cat_id)
    {
      temp = item?.cat_id;                            
      return (
        <div className="custom-control custom-radio mb-3">
         <div className="form-control-label"> {item.category_title}</div>
          <input
            className="custom-control-input"
            id= {item.id}
            name= {item.cat_id}
            type="radio"
          />
          <label className="custom-control-label" htmlFor={item.id}>
            {item.form_title} {temp}
          </label>
        </div>
       )
    }

    return (
      <div className="custom-control custom-radio mb-3">
        <input
          className="custom-control-input"
          id= {item.id}
          name= {item.cat_id}
          type="radio"
        />
        <label className="custom-control-label" htmlFor={item.id}>
        {item.form_title}
        </label>
      </div>
     )
  })
}

My Json array is like this.

   {"forms":
     [
     {"id":1,"category_title":"Individual Tax Return","cat_id":1, 
    "form_title":"Single}, 

     {"id":2,"category_title":"Individual Tax Return","cat_id":1, 
     "form_title":"Married Filing Separately"}, 

     {"id":3,"category_title":"Business Type", "cat_id":2, 
    "form_title":"SoleProprietorships"},

     {"id":4,"category_title":"Business Type","cat_id":2, 
     "form_title":" Partnership"}
     ]
    }

I want to display this one like as below //////////////////

   Individual Tax Return
     Single
     Married Filing Separately
  Business Type
     SoleProprietorships
     Partnership

///////////////////////// Please check and help with thanks

Upvotes: 1

Views: 456

Answers (1)

Albin C S
Albin C S

Reputation: 348

Please try this

json part

const recipes = [{
    id: 716429,
    title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
    image: "http://ovuets.com/uploads/716429-312x231.jpg>",
    dishTypes: [
        "lunch",
        "main course",
        "main dish",
        "dinner"
    ],
    recipe: {
    // recipe data
    }
}]

function part

export default function Recipes() {
return (
<div>
    {recipes.map((recipe) => {
    return <div key={recipe.id}>
        <h1>{recipe.title}</h1>
        <img src={recipe.image} alt="recipe image" />
        {recipe.dishTypes.map((type, index) => {
            return <span key={index}>{type}</span>
        })}
    </div>
    })}
</div>
)}

Upvotes: 1

Related Questions