javascript / intermediate
Snippet
Defensives Programmieren mit Optional Chaining in JSX
Optional Chaining (?.) und Nullish Coalescing (??) sind essenziell, um sicher auf tief verschachtelte Objekteigenschaften in JSX zuzugreifen, ohne bei undefinierten Daten abzustürzen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
const UserProfile = ({ user }) => {return (<div><h1>{user?.name ?? 'Guest'}</h1><p>{user?.settings?.theme || 'Default Theme'}</p><ul>{user?.posts?.map(p => <li key={p.id}>{p.title}</li>)}</ul></div>);};
react
Erklärung
1
user?.name ?? 'Guest'
Prüft sicher, ob 'user' existiert, bevor auf 'name' zugegriffen wird; Standardwert ist 'Guest'.
2
user?.posts?.map(...)
Verhindert Fehler, falls 'posts' während der Map-Operation undefiniert oder null ist.