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.

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. MFox MFox Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking. PawelPloszaj PawelPloszaj I'm fronted developer with 10+ years of experience with big projects. I have small backend background too Daniel Vázquez Daniel Vázquez Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting. Kingsley Omage Kingsley Omage Fullstack software engineer passionate about AI Agents, blockchain, LLMs. prajwalfullstack prajwalfullstack Hi Im a full stack developer, a vibe coded MVP to Market ready product, I'm here to help Jacek Rozanski Jacek Rozanski Senior PHP/Symfony developer and DevOps engineer with 20+ years of professional experience, running opcode.pl (web development agency, est. 2004). Day job: I'm the sole backend developer at merketing company where I own and maintain 11 PHP/Symfony microservices on AWS (ECS Fargate, RDS, S3, CloudFront), handle the full CI/CD pipeline (Bitbucket Pipelines, Docker), and manage monitoring with Sentry and CloudWatch. These services handle high request volumes in production every month. What I bring to AI-built apps: - I audit and fix security issues (OWASP methodology), performance bottlenecks, and architectural problems in codebases generated by Cursor, Claude Code, Lovable, Bolt, and v0 - I refactor AI-generated prototypes into production-grade applications with proper error handling, testing, and clean architecture (SOLID, DDD, hexagonal architecture) - I set up the infrastructure AI tools don't touch: AWS hosting, CI/CD pipelines, automated deployments, database optimization, monitoring, and alerting - I integrate external services: payment providers, email systems, partner APIs, SSO/auth Tech stack: PHP 8.x, Symfony, React, Next.js, PostgreSQL, MySQL, Docker, AWS (ECS, RDS, S3, SQS/SNS, CloudFront), Terraform, Supabase. I also use AI tools daily (Claude Code, Cursor) in my own workflow, so I understand both the strengths and the gaps in AI-generated code. Based in Poland (CET timezone). Available for async work and calls during EU/US business hours. 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 zipking zipking I am a technologist and product builder dedicated to creating high-impact solutions at the intersection of AI and specialized markets. Currently, I am focused on PropScan (EstateGuard), an AI-driven SaaS platform tailored for the Japanese real estate industry, and exploring the potential of Archify. As an INFJ-T, I approach development with a "systems-thinking" mindset—balancing technical precision with a deep understanding of user needs. I particularly enjoy the challenge of architecting Vertical AI SaaS and optimizing Small Language Models (SLMs) to solve specific, real-world business problems. Whether I'm in a CTO-level leadership role or hands-on with the code, I thrive on building tools that turn complex data into actionable value. Dor Yaloz Dor Yaloz SW engineer with 6+ years of experience, I worked with React/Node/Python did projects with React+Capacitor.js for ios Supabase expert

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