← Back to Demo Hub
Test #17Forms & User Input

Uncontrolled Input Warning

Input value changes from undefined to a defined value, triggering React warning.

📋 Demo Instructions

  1. Click the "Trigger Error" button below
  2. Open browser console (F12) to see the error
  3. Wait 5-10 seconds for the error to be captured
  4. Go to Dashboard → Performance Monitoring
  5. Click "Fix with Carla" on the error
  6. Review the generated PR
🌍 Real-World Scenario
Form state initialized without all fields, so some input values are undefined. When the field is later set, React warns that the input switched from uncontrolled to controlled. Common when conditionally rendering form fields or loading data asynchronously.
✅ Expected Fix
Initialize all form fields with empty strings ('') instead of undefined, or use || '' fallback in the value prop.
Fix Confidence:HIGH

💻 Buggy Code

// Buggy Code
const [formData, setFormData] = useState({
  name: 'John',
  // email is undefined
});

return <input value={formData.email} onChange={...} />
// Warning: A component is changing an uncontrolled input to be controlled

🔴 Error Log

Waiting for error to be triggered...

Value: undefined