Conversion.jsx

import React from 'react'
import { Button, Card, Container, Dropdown, FormControl } from 'react-bootstrap'
import './App.css'
import 'bootstrap/dist/css/bootstrap.css'

const titleApp = `Convertly.io`
const desc = `${titleApp} a React application using exchangeratesapi.io API to convert currencies`

export class Conversion extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedCurrency: -1,
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleSubmission = this.handleSubmission.bind(this)
  }

  handleSubmission = (event) => {
    alert(`Currency symbol is ${this.state.selectedCurrency}`)
    event.preventDefault()
  }

  render() {
    const { currencySymbols } = this.props
    const renderCurrs = currencySymbols.map((currency) => currency.id)
    const selectedCurrency = currencySymbols.find(
      (currency) => currency.id === this.state.selectedCurrency
    )

    return (
      <Container>
        {renderCurrs + '\n'}
        <Card variant="primary">
          <Card.Body>
            <Card.Title>{titleApp}</Card.Title>
            <Card.Text>{desc}</Card.Text>
            <Dropdown>
              <Dropdown.Toggle variant="danger">
                Select Currency
              </Dropdown.Toggle>
              <Dropdown.Menu>
                {currencySymbols.map((currency) => (
                  <Dropdown.Item
                    id="currencySymb0l"
                    key={'c' + currency.id}
                    eventKey={currency.id}
                    onSelect={(eventKey) => {
                      this.setState({
                        currencySymbol: eventKey,
                      })
                    }}
                  >
                      <p> {currency.id} </p>
                  </Dropdown.Item>
                ))}
              </Dropdown.Menu>

              <p>Selected currency: {selectedCurrency.id} </p>
            </Dropdown>
            <FormControl></FormControl>
            <Button
              onClick={this.handleCalc}
              variant="danger"
              size="sm"
              id="convertClick"
            >
              Convert
            </Button>
          </Card.Body>
        </Card>
      </Container>
    )
  }
}

export default Conversion