Code Quiz

Discriminated Union Narrowing in React

Spot the property access bug inside a narrowed branch of a discriminated union.

Codetypescript

type LoadingState = { status: "loading" };
type SuccessState = { status: "success"; data: string };
type ErrorState = { status: "error"; message: string };

type State = LoadingState | SuccessState | ErrorState;

function Display({ state }: { state: State }) {
  if (state.status === "loading") {
    return <p>Loading...</p>;
  } else if (state.status === "success") {
    return <p>{state.message}</p>;
  } else {
    return <p>{state.message}</p>;
  }
}

The discriminated union is correctly defined, but this component fails to compile. What is the bug?

Next →Discriminated Unions in React Props