how to display items with category name as title - reactjs

Question

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

Answer 1

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>
)}