Language Switcher With Context
ReactJS
Hard
6 views
Problem Description
Create a language switcher using context and show translated text.
Output Format
Render a React component.
Constraints
Provide language in context and read it in children.
Official Solution
import React, { createContext, useContext, useMemo, useState } from 'react';
const LangContext = createContext(null);
const strings = {
en: { title: 'Practice today on meetcode', button: 'Switch to Hindi' },
hi: { title: 'Aaj meetcode par practice karo', button: 'Switch to English' }
};
function LangProvider({ children }) {
const [lang, setLang] = useState('en');
const value = useMemo(() => ({ lang, toggle: () => setLang((l) => (l === 'en' ? 'hi' : 'en')) }), [lang]);
return <LangContext.Provider value={value}>{children}</LangContext.Provider>;
}
function useLang() {
const ctx = useContext(LangContext);
if (!ctx) throw new Error('LangProvider missing');
return ctx;
}
function Card() {
const { lang, toggle } = useLang();
return (
<div style={{ border: '1px solid #eee', borderRadius: 16, padding: 16, width: 480 }}>
<h2 style={{ marginTop: 0 }}>{strings[lang].title}</h2>
<button type='button' onClick={toggle} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>{strings[lang].button}</button>
</div>
);
}
export default function App() {
return (
<div style={{ padding: 16 }}>
<LangProvider>
<Card />
</LangProvider>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!