import React, { Component } from 'react'
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) {
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