import React, { Component } from 'react' import i18next from 'i18next' import { ReactComponent as EnFlag } from '../../images/flags/en.svg' import { ReactComponent as FrFlag } from '../../images/flags/fr.svg' const languages = [ { name: 'en', selected: true, flag: <EnFlag />, }, { name: 'fr', selected: false, flag: <FrFlag />, }, ] class Dropdown extends Component { constructor(props) { super(props) this.state = { isOpen: false, selected: 'en', } } selectLanguage(name) { if (name !== this.state.selected) { i18next.changeLanguage(name) this.setState({ selected: name, }) } } toggleDropdown() { this.setState(prevState => ({ isOpen: !prevState.isOpen, })) } render() { const { isOpen, selected } = this.state return ( <div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}> <ul className="dropdown-list i18n-flag"> {languages .filter(language => isOpen ? language : language.name === selected ) .map(language => ( <li className={`dropdown-item${ language.name === selected && isOpen ? ' dropdown-item-selected' : '' }`} key={language.name} onClick={() => this.selectLanguage(language.name)} > {language.flag} {language.name} </li> ))} </ul> </div> ) } } export default Dropdown