React App throwing error " Received NaN for the `value` attribute" and "A component is changing an uncontrolled input to be controlled"

Question

App.js

import './App.css';

import { useState, useEffect } from 'react'; import CurrencyItem from './CurrencyItem';

function App() { const url = 'https://api.exchangerate.host/latest';

const [currencyNames, setCurrencyNames] = useState([]);
const [fromCurrency, setFromCurrency] = useState();
const [toCurrency, setToCurrency] = useState();

const [exchangeRate, setExchangeRate] = useState();

const [fromAmount, setFromAmount] = useState();
const [toAmount, setToAmount] = useState();

useEffect(() => {
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            setCurrencyNames([...Object.keys(data.rates)]);
        });
    console.log(currencyNames);
}, []);

useEffect(() => {
    if (toCurrency != null && fromCurrency != null) {
        fetch(`${url}?symbols=${toCurrency},${fromCurrency}`)
            .then((response) => response.json())
            .then((data) => {
                setExchangeRate(data.rates[toCurrency]);
                console.log(data);
                console.log(toCurrency, fromCurrency, exchangeRate);
            });
    }
}, [toCurrency, fromCurrency]);

const changeToAmount = (v) => {
    let newValue = parseFloat(v);
    let newAmount = newValue / exchangeRate;
    setFromAmount(newAmount);
};
const changeFromAmount = (v) => {
    let newValue = parseFloat(v);
    let newAmount = newValue * exchangeRate;
    setToAmount(newAmount);
};

return (
    <div className="App">
        <div className="app-container">
            <h2>CURCON</h2>
            <CurrencyItem
                currencyNames={currencyNames}
                selectedCurrency={fromCurrency}
                onChangeCurrency={(e) => setFromCurrency(e.target.value)}
                changeAmount={(e) => changeToAmount(e.target.value)}
                amount={fromAmount}
            ></CurrencyItem>
            <CurrencyItem
                currencyNames={currencyNames}
                selectedCurrency={toCurrency}
                onChangeCurrency={(e) => setToCurrency(e.target.value)}
                changeAmount={(e) => changeFromAmount(e.target.value)}
                amount={toAmount}
            ></CurrencyItem>
        </div>
    </div>
);

} export default App;

CurrencyItem.js

    import React from 'react';

const CurrencyItem = ({ currencyNames, selectedCurrency, onChangeCurrency, amount, changeAmount, }) => { return (

Select Currency

{currencyNames.map((el, i) => { return ( {el} ); })} ); };

export default CurrencyItem;

Error

react_devtools_backend.js:4061 Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.
at input
at div
at div
at CurrencyItem (http://localhost:3000/static/js/bundle.js:175:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:34:92)

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at div
at div
at CurrencyItem (http://localhost:3000/static/js/bundle.js:175:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:34:92)

This is my first time asking question on Stack Overflow, if I have made any formatting error or mistakes please forgive me

Answer 1

The value in

const changeFromAmount = (v) => {
    let newValue = parseFloat(v);
    let newAmount = newValue * exchangeRate;
    setToAmount(newAmount);
};

cannot be parsed to the Number. Check the v argument and then check the exchangeRate. One of them is not a Number.

And it will be better if you add initial state in useState for exchangeRate, toAmount and fromAmount.