Discussion on: Translate your React app using Format.js

import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import messages_en from './translations/en.json';
import messages_fr from './translations/fr.json';
import messages_es from './translations/es.json';
// Import other language translation files as needed

function App() {
  const [locale, setLocale] = useState('en');

  const messages = {
    en: messages_en,
    fr: messages_fr,
    es: messages_es,
    // Add other language translations here
  };

  const handleLocaleChange = (e) => {
    setLocale(e.target.value);
  };

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div className="app">
        {/* Your app components */}
        <select value={locale} onChange={handleLocaleChange}>
          <option value="en">English</option>
          <option value="fr">Français</option>
          <option value="es">Español</option>
          {/* Add other language options as needed */}
        </select>
      </div>
    </IntlProvider>
  );
}

export default App;

Create a translations folder in your project root directory.
Inside the translations folder, create a separate JSON file for each language, following the format: languageCode.json (e.g., en.json, fr.json, es.json).
Populate each translation file with key-value pairs representing the translated messages for that language. For example:

// en.json
{
  "app.greeting": "Hello!",
  "app.button": "Click me!"
}

// fr.json
{
  "app.greeting": "Bonjour !",
  "app.button": "Cliquez ici !"
}
// es.json
{
  "app.greeting": "¡Hola!",
  "app.button": "Haz clic aquí"
}

import React from 'react';
import { FormattedMessage } from 'react-intl';

function Greeting() {
  return (
    <div>
      <FormattedMessage id="app.greeting" defaultMessage="Hello!" />
    </div>
  );
}

export default Greeting;