This component has hardcoded text. Refactor it to support multiple languages.

Q: This component has hardcoded text. Refactor it to support multiple languages.

Learn the answer to "This component has hardcoded text. Refactor it to support multiple languages." with detailed explanations, code examples, and best practices on DeployU.

practical Internationalization Interactive Quiz Code Examples

A developer has built a new Welcome component. It works perfectly, but all the text is hardcoded in English. The product team now requires the application to support both English and German.

The current implementation is not scalable for adding new languages.

You’ve been given the component with the hardcoded text. Your task is to refactor it to support internationalization (i18n).

Create a simple translation dictionary to hold the strings for English (en) and German (de).
Implement a way to manage the application’s current language (locale).
Connect the LanguageSwitcher buttons to change the locale.
Update the Welcome component to display the correct text based on the selected locale.

For this challenge, you don’t need a full library like react-i18next; implementing a simple system using React state and context is sufficient to demonstrate the concept.

Welcome Component - Add Internationalization

Your Code

import React, { useState, useContext, createContext } from 'react';

// --- Challenge: Refactor this section ---

// 1. The text is hardcoded in English
function Welcome() {
  return (
    <div>
      <h2>Welcome!</h2>
      <p>Thank you for visiting our application.</p>
    </div>
  );
}

// 2. The language switcher is not connected to any logic
function LanguageSwitcher() {
  return (
    <div>
      <button>English</button>
      <button>German</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <LanguageSwitcher />
      <hr />
      <Welcome />
    </div>
  );
}

// Validate the i18n implementation
const code = document.querySelector('[data-editor]').textContent;

// Check for translations dictionary
if (!code.includes('translations') || !code.match(/translations\s*=\s*{/)) {
  throw new Error('Test failed: Create a translations object/dictionary with en and de keys.');
}

// Check for LocaleContext
if (!code.includes('LocaleContext') || !code.includes('createContext')) {
  throw new Error('Test failed: Create a LocaleContext using createContext to manage the locale state.');
}

// Check that Welcome uses context
if (!code.match(/Welcome[\s\S]*?useContext/)) {
  throw new Error('Test failed: Welcome component should use useContext to access the locale.');
}

// Check that LanguageSwitcher uses context
if (!code.match(/LanguageSwitcher[\s\S]*?useContext/)) {
  throw new Error('Test failed: LanguageSwitcher should use useContext to access setLocale.');
}

// Check for setLocale calls in buttons
if (!code.includes('setLocale')) {
  throw new Error('Test failed: LanguageSwitcher buttons should call setLocale to change the language.');
}

// Success!
console.log('✓ All tests passed! i18n system implemented correctly.');
console.log('✓ Clicking language buttons will now switch the displayed text.');

Click "Run Code" to see output...

Click "Run Code" to see test results...

How Different Experience Levels Approach This

Junior Engineer

Surface Level

import React, { useState, useContext, createContext } from 'react'; // 1. The text is hardcoded in English function Welcome() { return ( <div> <h2>Welcome!</h2> <p>Thank you for visiting our application.</p> </div> ); } // 2. The language switcher is not connected to any logic function LanguageSwitcher() { return ( <div> <button>English</button> <button>German</button> </div> ); } export default function App() { return ( <div> <LanguageSwitcher /> <hr /> <Welcome /> </div> ); }

Technically correct, but lacks depth

Senior Engineer

Production Ready

import React, { useState, useContext, createContext } from 'react'; // 1. Create a dictionary for translations const translations = { en: { title: 'Welcome!', body: 'Thank you for visiting our application.', }, de: { title: 'Willkommen!', body: 'Danke für Ihren Besuch auf unserer Anwendung.', }, }; // 2. Create a context to manage the locale const LocaleContext = createContext(); // 3. Refactor Welcome to use the context and dictionary function Welcome() { const { locale } = useContext(LocaleContext); const { title, body } = translations[locale]; return ( <div> <h2>{title}</h2> <p>{body}</p> </div> ); } // 4. Refactor LanguageSwitcher to change the locale function LanguageSwitcher() { const { setLocale } = useContext(LocaleContext); return ( <div> <button onClick={() => setLocale('en')}>English</button> <button onClick={() => setLocale('de')}>German</button> </div> ); } // 5. The App component now provides the context export default function App() { const [locale, setLocale] = useState('en'); return ( <LocaleContext.Provider value={{ locale, setLocale }}> <div> <LanguageSwitcher /> <hr /> <Welcome /> </div> </LocaleContext.Provider> ); }

Shows real-world understanding & trade-offs

What Makes the Difference?

Context over facts: Explains when and why, not just what
Real examples: Provides specific use cases from production experience
Trade-offs: Acknowledges pros, cons, and decision factors

Practice Question

For an application that needs to be translated, what is the main problem with hardcoding text strings directly into your components?

Questions

This component has hardcoded text. Refactor it to support multiple languages.

How Different Experience Levels Approach This

Practice Question