Loading...

TypeScript for FrontEnd developers

JS & TS Fundamentals

Introduction to TypeScript

TypeScript & ViteJS

React and TypeScript

Variable Scopes

Reference vs Value

(⚛) React, useState and Spread

Work with Types

(⚛) React and Types

(⚛) React, strictNullChecks, conditional templates and optional chaining

TypeScript Inference

(⚛) React and TypeScript Inference

JavaScript & TypeScript classes

Arrow Functions

(⚛) React and Arrow Functions

Work with JavaScript Modules

Dynamic Imports

React Components & TypeScript

(⚛) React and useState hook

(⚛) React and Barrel files

(⚛) React Lazy Components

JavaScript API

Template Literals

(⚛) Template Literals in React

(🅰) Template Literals in Angular

(⚛) React Components and Destructuring

Work with arrays

(⚛) React, Map and Arrays

Work with Objects

(⚛) React and Objects

native fetch API (+ React example)

Fetch data with Axios (+ React example)

Promise Combinators

Promise.allSettled (+ React example)

async/await (+ React example)

TypeScript Deep Dive

Modular Interfaces

React and Union Type

Literal Types (& Union)

React and Literal Types

Intersection Types

(⚛) React and Intersection types

(⚛) Components that extends HTML Elements

(⚛) extends img element

TypeScript Utility Types

(⚛) React and Partial utility type

Optional<T, K> (utility-types)

ReadOnly & DeepReadonly

(⚛) React and TypeScript typeof utility

Extract and Exclude

(⚛) React and TypeScript Record utility

(⚛) React and ReturnType

index access type

const assertions (as const)

Template Literal Type

(⚛) React and Literal Types

Uppercase & other String Manipulation types

(⚛) React and Awaited

Narrowing and Type Guards

Narrowing with typeof (+ React Example)

Discriminated Unions (+ React Example)

Type Predicates (+ React example)

unknown parsing and throw errors

fetch, unknown and type predicates

Work with Generics

Multiple generic parameters

Generics & Promise

Generic in Types

(⚛) React and Generic Components - Example

TypeScript & extends

extends and object key

React and Extends Types

Conditional Types

Conditional and Template Literal Types

Distributive Conditional Types

Narrowing with Conditional Types and never

Utility Types & conditional types

Nested Conditional Types

(⚛) React and Conditional Types: real-world example

infer and promises

infer and functions

infer and deep arrays

infer, conditional types and type guards

(⚛) React and infer: real-world example

Bonus Videos: React & Types - Mini course (italian)

React & TypeScript Union Type

React & Literal Types

React and Intersection Type

React & TypeScript Discriminated Unions

Loading...

Send your feedback

React and Objects

2 snippets

5 mins

Fabio Biondi

Google Developer Expert
Microsoft MVP

# React & Optional Chaining

In this example we have a React component with two properties:

user1: which contains an object
user2: which contains null

The optional chaining operator helps avoid runtime exceptions by returning undefined when accessing a property of an object that does not exist. In cases where the user is unavailable, we display "User not available".

React and Optional Chaining

Output

OpenGraph Test

more examples...

There are several examples for managing the case where the state is null with the use of the optional chaining operator and conditional rendering in the React and Types lesson

# React & Object methods

URL

/courses/typescript/typescript-for-frontend-developers/150-work-with-objects/10-react-objects

EMAIL

ADD CODE SNIPPET

ADD IMAGE/SCREENSHOTS

VOTE

54321

background handwritten

Unblock the content

Sign In

It's completely free!

Your email

Password

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

Can we iterate on all the properties and values of an object, just like we do for arrays? Sure. Just use the array methods we saw in previous lessons: Object.keys(), Object.values() and Object.entries(). We also use optional chaining (?.) to display the properties of an object:

React and Object methods

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register