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

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.