React function - is not defined no-undef— component integration

Question

Sorry for the noob question but im still learning and putting the puzzle pieces together.

basically i created my first react site that was functioning fine, as i am trying to add more components from other projects im having trouble integrating them because im not entirely sure what im doing or where things need to go. Im just trying to add the currency calculator to one of the site pages, but not entirely sure where to place the logic from the prev workspace into my website?

This is in CurrencyCalculator.js

import React, { Component } from 'react'
import { InfoConsumer } from '../context';
import styled from 'styled-components';
import Reviews from '../Reviews'

function CurrencyCal(props) {
  const {
    currencyOptions,
    selectedCurrency,
    onChangeCurrency,
    onChangeAmount,
    amount
  } = props
};



 class CurrencyCalculator extends Component {
   render() {
    return (
    <InfoConsumer>
      {data => {
        const {
        id,
        headerTitle,
        headerSubTitle,
        headerText,
        img,
        title,
        maps,
        descripton
      } = data.detailInfo;

      return (
        <React.Fragment>
          <HeaderDetails className="container-fluid align-items-center">
          <div>
      <input type="number" className="input" value={amount} onChange={onChangeAmount} />
      <select value={selectedCurrency} onChange={onChangeCurrency}>
        {currencyOptions.map(option => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>
    </div>
           </HeaderDetails>

        </React.Fragment>
      );
      }}
      </InfoConsumer>
  );
    }
};

export default CurrencyCalculator;



const HeaderDetails = styled.header`
background: linear-gradient(rgba(109,109,109), rgba(255,255,255));
height: 40vh;
text-transform: uppercase;
color: var(--mainWhite);
text-align: center;

h1 {
  padding-top:10%
  color: var(--mainDark);
}

h4 {
  color: var(--mainDark);
}

p {
  padding-left:10%;
  padding-right: 10%;
  margin-bottom: 10%
  color: var(--mainDark);
}


i {
  font-size: 1.875rem;
  color: car(--mainDark);
}

i:hover {
  color: var(--mainBlue);
  cursor: pointer;
}

.nav-item {
  height:18.75rem;4
}

@media(max-width: 760px) {
  h1,h4{
    color: var(--mainWhite);
  }
}
`;

This is in my Calculator.js

import React, { useEffect, useState } from 'react';
import './App.css';
import { Header } from './Header'
import CurrencyCalculator from './components/pages/CurrencyCalculator';

const BASE_URL = 'https://api.exchangeratesapi.io/latest'

function CurrencyApp() {
  const [currencyOptions, setCurrencyOptions] = useState([])
  const [fromCurrency, setFromCurrency] = useState()
  const [toCurrency, setToCurrency] = useState()
  const [exchangeRate, setExchangeRate] = useState()
  const [amount, setAmount] = useState(1)
  const [amountInFromCurrency, setAmountInFromCurrency] = useState(true)



  let toAmount, fromAmount
  if(amountInFromCurrency) {
    fromAmount = amount
    toAmount = amount * exchangeRate
  } else {
    toAmount = amount
    fromAmount = amount / exchangeRate
  }

  useEffect(() => {
    fetch(BASE_URL)
      .then(res => res.json())
      .then(data => {
        const firstCurrency = Object.keys(data.rates)[0]
        setCurrencyOptions([data.base, ...Object.keys(data.rates)])
        setFromCurrency(data.base)
        setToCurrency(firstCurrency)
        setExchangeRate(data.rates[firstCurrency])
      })
  }, [])

  useEffect(() => {
    if (fromCurrency != null && toCurrency !=null) {
      fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)
      .then(res => res.json())
      .then(data => setExchangeRate(data.rates[toCurrency]))
    }
  }, [fromCurrency, toCurrency])



  function handleFromAmountChange(e) {
    setAmount(e.target.value)
    setAmountInFromCurrency(true)
}

function handleToAmountChange(e) {
  setAmount(e.target.value)
    setAmountInFromCurrency(false)
}


  return (
    <>
    <div className="container"> 
    <div className="header"><Header /></div>
    <h1>Convert</h1> 
    <CurrencyCalculator 
      currencyOptions={currencyOptions}
      selectCurrency={fromCurrency}
      onChangeCurrency={e => setFromCurrency(e.target.value)}
      onChangeAmount={handleFromAmountChange}
      amount={fromAmount}
      />
    <div className='equals'>=</div>
    <CurrencyCalculator 
      currencyOptions={currencyOptions}
      selectedCurrency={toCurrency}
      onChangeCurrency={e => setToCurrency(e.target.value)}
      onChangeAmount={handleToAmountChange}
      amount={toAmount}

      />
      </div>
    </>
  );
}

export default CurrencyApp;

This is my Context.js

import React, { Component } from 'react';
import { placeInfo, reviews, detailInfo, news } from '../data'


const InfoContext = React.createContext();


class InfoProvider extends Component {

  state = {
    info: placeInfo,
    reviews: reviews,
    detailInfo: detailInfo,
    news: news
  }

  getItem = id => {
    const item = this.state.info.find(item => item.id ===id);
    return item
  }

  handleDetail = id => {
    const item = this.getItem(id);
    this.setState(() => {
      return {
      detailInfo: item
      }
    });
  };

  render() {
    return (
      <InfoContext.Provider value={{
        info: this.state.info,
        reviews: this.state.reviews,
        detailInfo: this.state.detailInfo,
        news: this.state.news,
        name: this.state.name,
        avatar: this.state.avatar,
        comment: this.state.comment,
        headerText: this.state.headerText,
        headerTitle: this.state.headerTitle,
        maps: this.state.maps,
        headerSubTitle: this.state.headerSubTitle,
        handleDetail: this.handleDetail
      }}>
        {this.props.children}
      </InfoContext.Provider>
    );
  }
}


const InfoConsumer = InfoContext.Consumer;


export { InfoProvider, InfoConsumer };

Package.Json

{
  "name": "latvia",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "styled-components": "^5.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

This code is not valid. Where you get data attribute???

CurrencyCalculator.js

return (
    <InfoConsumer>
      {data => {
        const {
        id,
        headerTitle,
        headerSubTitle,
        headerText,
        img,
        title,
        maps,
        descripton
      } = data.detailInfo;

      return (