Lovable ui

React Fragment Key Warning - No Key Prop

Warning: 'Each child in a list should have a unique key prop' when using fragments. Can't add key to <> syntax. Lists don't render correctly with fragment groups.

Fragments in lists need keys when rendering multiple elements per item. Shorthand <> syntax doesn't support keys.

Error Messages You Might See

Keys should be placed on the outermost element Fragment does not accept keys Each child should have a unique key prop
Keys should be placed on the outermost elementFragment does not accept keysEach child should have a unique key prop

Common Causes

  1. Using <> shorthand fragment in list (can't add key)
  2. Key on parent instead of fragment itself
  3. Not understanding when to use fragments
  4. Mixing fragment and non-fragment items
  5. Complex nested fragments without keys

How to Fix It

Use React.Fragment with key for list items:

// Bad - can't add key to <>  
{items.map(item => (
  <>
    
{item.name}
{item.email}
))} // Good - use React.Fragment with key import { Fragment } from 'react'; {items.map(item => (
{item.name}
{item.email}
))}

Real developers can help you.

David Olverson David Olverson Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production. Richard McSorley Richard McSorley Full-Stack Software Engineer with 8+ years building high-performance applications for enterprise clients. Shipped production systems at Walmart (4,000+ stores), Cigna (20M+ users), and Arkansas Blue Cross. 5 patents in retail/supply chain tech. Currently focused on AI integrations, automation tools, and TypeScript-first architectures. BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. Mehdi Ben Haddou Mehdi Ben Haddou - Founder of Chessigma (1M+ users) & many small projects - ex Founding Engineer @Uplane (YC F25) - ex Software Engineer @Amazon and @Booking.com Franck Plazanet Franck Plazanet I am a Strategic Engineering Leader with over 8 years of experience building high-availability enterprise systems and scaling high-performing technical teams. My focus is on bridging the gap between complex technology and business growth. Core Expertise: 🚀 Leadership: Managing and coaching teams of 15+ engineers, fostering a culture of accountability and continuous improvement. 🏗️ Architecture: Enterprise Core Systems, Multi-system Integration (ERP/API/ETL), and Core Database Structure. ☁️ Cloud & Scale: AWS Expert; architected systems handling 10B+ monthly requests and managing 100k+ SKUs. 📈 Business Impact: Aligning tech strategy with P&L goals to drive $70k+ in monthly recurring revenue. I thrive on "out-of-the-box" thinking to solve complex technical bottlenecks and am always looking for ways to use automation to improve business productivity. Costea Adrian Costea Adrian Embedded Engineer specilizing in perception systems. Latest project was a adas camera calibration system. prajwalfullstack prajwalfullstack Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help Matthew Jordan Matthew Jordan I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job. legrab legrab I'll fill this later Bastien Labelle Bastien Labelle Full stack dev w/ 20+ years of experience

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

Can I add key to <> syntax?

No, use React.Fragment explicitly to add key.

When do I need fragments?

When returning multiple root elements without wrapper div. In lists, only fragments can have keys.

Related Lovable Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help