CurrencyCodes.js

import React , {Fragment} from "react";
import Axios from "axios";

class CurrencyCodes extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            currencyData : null,
            currencies : [],
            selectedCurrency : '',
            errorMessage : null
        }
    }

    componentDidMount() {
        Axios.get('http://data.fixer.io/api/symbols?access_key=71de7123922aa606d3d6d9a551d509cc&format=1').then((response) => {
            this.setState({
                currencyData : response.data.symbols,
                currencies : Object.keys(response.data.symbols)
            });
        }).catch((err) => {
            this.setState({
                errorMessage : err.message
            });
        });
    }

    updateInput = (e) => {
        this.setState({
            selectedCurrency : e.target.value
        });
    };

    render() {
        return (
            <div>
                {console.log(this.state.currencies)}
                <pre>{JSON.stringify(this.state.currencies)}</pre>
                <form>
                    {
                        <select onChange={this.updateInput}>
                            this.state.currencyData && this.state.currencies.length > 0 ? <Fragment>
                            {
                                this.state.currencies.map((currency) => {
                                    return (

                                        <option value={currency} >{this.state.currencyData[currency]}</option>
                                    )
                                })
                            }
                        </Fragment> : null
                        </select>
                    }
                    <span>{this.state.selectedCurrency}</span>
                </form>
            </div>
        );
    }
}
export default CurrencyCodes;