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: , }, { name: 'fr', selected: false, flag: , }, ] 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 (
this.toggleDropdown()}>
    {languages .filter(language => isOpen ? language : language.name === selected ) .map(language => (
  • this.selectLanguage(language.name)} > {language.flag} {language.name}
  • ))}
) } } export default Dropdown