How can I use optional chaining in React?

How can I use optional chaining in React?

Optional chaining is a feature that allows you to safely access deeply nested properties without having to check each level. In React, you can use it to avoid errors when accessing properties of objects that might be undefined.

Can you give me an example?

Sure! If you have an object like const user = { profile: { name: 'John' } };, you can access the name with user.profile?.name. If profile is undefined, it won't throw an error; it will just return undefined.

What if I want to provide a default value?

You can use the nullish coalescing operator ?? along with optional chaining. For example: const name = user.profile?.name ?? 'Guest'; This will return 'Guest' if name is undefined.

That's really helpful, thanks!