What is the right way to change language without redirection in HTML?

Question

I am new to web development and I have given the task to change the language of a website without changing the pages. (For example, somesite.com/en/home for English, somesite.com/jp/home for Japanese, etc.,). I think I have come up with a way using React, but I am not so sure whether this approach to changing languages is natural, efficient or not. Below is my code in React.js,

import React from 'react'
import metadata from './metadata'

class Display extends React.Component
{
    constructor()
    {
        super()
        this.state = {l: metadata[0]}
        this.handleLanguageChange = this.handleLanguageChange.bind(this)
    }

    handleLanguageChange()
    {
        let lang = event.target.value;
        if(lang == 'ta')
            this.setState({l: metadata[0]})
        else if(lang == 'en')
            this.setState({l: metadata[1]})
        else if(lang == 'jp')
            this.setState({l: metadata[2]})
        else if(lang == 'zh')
            this.setState({l: metadata[3]})
    }

    render()
    {
        return(
            <div>
               <select onChange={this.handleLanguageChange}>
                    <option value="ta">Tamil</option>
                    <option value="en">English</option>
                    <option value="jp">Japanese</option>
                    <option value="zh">Chinese</option>
               </select>
               <h1>{this.state.l.language}</h1>
               <h2>{this.state.l.title}</h2>
               <p>{this.state.l.content}</p>
            </div>
        )
    }
}

export default Display

and, here is my metadata.

const data = [
    {
        language: 'தமிழ்',
        title: 'அறிமுகம் ',
        content: 'வேலை செய்கிறதா என பார்க்க'
    },
    {
        language: 'English',
        title: 'Introduction',
        content: 'To check whether this is working or not'
    },
    {
        language: '日本語',
        title: '紹介',
        content: '動くかどうか分かるのため'
    },
    {
        language: '中文',
        title: '介绍',
        content: '知道这是否有效'
    }
]

export default data

and, index.js as well.

import React from 'react';
import ReactDOM from 'react-dom'
import Display from './Display'

ReactDOM.render(<Display />, document.getElementById('root'));

When I tested it, it worked like a dream. But is this approach right? Could this pose any security threats?

Please guide me in the right direction.

Answer 1

Your approach is good, probably is the same approach everyone is using.

Couple of notes, refreshing a page with new text everywhere might not be easily accomplished if you use a prop or state variable without "global" state/storage strategy.

Try to think of using "Context" to turn this language into a more "global" variable to be sitting locally with any of your components. This way you don't have to worry about passing this variable around, also you can have a separate scope to change this variable.

This isn't obvious at the beginning, but when you expand your code base, you'll realize that your current solution won't scale.

Answer 2

Keep json file each for all languages and then you can do like this:

    import english from './locales/english.json'

    handleLanguageChange()
        {
            let lang = event.target.value;
            if(lang == 'english')
                this.setState({stateOfLocale: 'english'});
                I18n.locale = stateOfLocale;
            ...
        }