Let's take our configuration to the next level. First, we'll add a Spanish translation to the query builder.

Spanish translation#

Create a file called types.ts that exports the type Language, which consists of the two strings "en" and "es" (English and Spanish, respectively).

export type Language = "en" | "es";

Add a state variable to the App component to track the language. Default the value to "en" to represent English.

// App.tsx

import { Language } from "./types";

// ...

  const [language, setLanguage] = useState<Language>("en");

Next, add a language selector at the top of the return statement.