Hard
How to Update Nested Form State Immutably in React Components
You're building a form component that needs to handle nested object updates. Which implementation correctly updates nested form values while preserving immutability?
1function ComplexForm() {2 const [formData, setFormData] = useState({3 user: {4 personal: {5 name: '',6 email: ''7 },8 preferences: {9 theme: 'light',10 notifications: {11 email: true,12 push: false13 }14 }15 },16 settings: {17 language: 'en'18 }19 });2021 // Missing update handler here2223 return (24 <form>25 <input26 name="user.personal.name"27 value={formData.user.personal.name}28 onChange={handleChange}29 />30 <input31 name="user.personal.email"32 value={formData.user.personal.email}33 onChange={handleChange}34 />35 <input36 name="user.preferences.notifications.push"37 type="checkbox"38 checked={formData.user.preferences.notifications.push}39 onChange={handleChange}40 />41 </form>42 );43}