Web Development Bootcamp

const FoodCards = ({ foodCat, foodItems, search }) => {   if (foodCat.length === 0) return <div>No Categories Available.</div>;   return (     <div className='container'>       {foodCat.map((data) => {         return (           <div key={data.id} className='row mb-3 justify-content-center'>             <div className='fs-3 m-3'>{data.CategoryName}</div>             <hr id="hr-success" style={{ height: "4px", backgroundImage: "linear-gradient(to left, rgb(0, 255, 137), rgb(0, 0, 0))" }} />             {foodItems.length === 0 ?               <div>No Such Data</div> :               foodItems.filter((item) => item.CategoryName === data.CategoryName && item.name.toLowerCase().includes(search.toLowerCase()))                 .map((filterItems) => {                   return (                     <div key={filterItems.id} className='col-12 col-md-6 col-lg-3'>                       <Card                         foodName={filterItems.name}                         item={filterItems}                         options={filterItems.options[0]}                         ImgSrc={filterItems.img}                       />                     </div>                   );                 })             }           </div>         );       })}     </div>   ); };