warnings in react.js project

Question

I'm a react.js beginner, and currently I'm doing a currency project, the functionality of the converter works well, but I got some error and warnings. Not really sure how to fix this. Here are the following errors and warnings.

Warning: Received NaN for the value attribute. If this is expected, cast the value to a string. index.js:1
at input at div at CurrencyRow at App

The specified value "NaN" cannot be parsed, or is out of range.

//App.js
function App() {
    const [currencyOption,setCurrencyOption] = useState([])
    const [fromCurrency,setFromCurrency] = useState()
    const [toCurrency,setToCurrency] = useState()
    const [exchangeRate,setExchangeRate] = useState()
    const [amount,setAmount] = useState(1)
    const [amountInFrom,setAmountInFrom] = useState(true)

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

    useEffect ( ()=> {
        fetch("https://api.exchangeratesapi.io/latest")
            .then(response=>response.json())
            .then(response=>{
                const firstCurrency = Object.keys(response.rates)[0]
                setCurrencyOption([response.base,...Object.keys(response.rates)])
                setFromCurrency(response.base)
                setToCurrency(firstCurrency)
                setExchangeRate(response.rates[firstCurrency])
        })
    
    },[])

    useEffect ( ()=> {
        if (fromCurrency!=null && toCurrency!=null && fromCurrency!=="EUR")
        {
            fetch("https://api.exchangeratesapi.io/latest")
                .then(response=>response.json())
                .then(response=>{
                    
                    const resultCurrency = response.rates[toCurrency]/response.rates[fromCurrency]
                    setExchangeRate(resultCurrency)
                    
            })
        }
        else if (fromCurrency!=null && toCurrency!=null) 
        {
            fetch("https://api.exchangeratesapi.io/latest")
                .then(response=>response.json())
                .then(response=>{

                    setExchangeRate(response.rates[toCurrency])

                })
        }
    
    },[fromCurrency,toCurrency])


    function changeFromAmount(event) {
        
        setAmount(event.target.value)
        setAmountInFrom(true)
    }
    function changeToAmount(event) {
        
        setAmount(event.target.value)
        setAmountInFrom(false)
    }

    
    return (
        <>
            <h1>Convert</h1>
            <CurrencyRow 
                currencyOption = {currencyOption} 
                selectedCurrency = {fromCurrency} 
                onChangeCurrency = {event=>setFromCurrency(event.target.value)}
                amount = {fromAmount}
                changeAmount = {changeFromAmount}
            />
            <p className="equal">=</p>
            <CurrencyRow 
                currencyOption = {currencyOption} 
                selectedCurrency = {toCurrency} 
                onChangeCurrency = {event=>setToCurrency(event.target.value)}
                amount = {toAmount}
                changeAmount = {changeToAmount}
            /> 
        </>
    )

}

export default App

function CurrencyRow(props) {
    const {
        currencyOption,
        selectedCurrency,
        onChangeCurrency,
        amount,
        changeAmount
    } = props
    
    return (
        <div>
            <input type="number" className="input" value = {amount} onChange = {changeAmount}/>
            <select value = {selectedCurrency} className="option" onChange={onChangeCurrency}>
                {currencyOption.map(option=>(<option key={option} value={option}>{option}</option>))}
                
            </select>
        </div>
    )

}
export default CurrencyRow

Mikhail Grechka · Accepted Answer · 2021-03-01 13:14:19Z

3

You're getting NaN because your exchangeRate state has no initial value, so, at first render, the app tries to multiply amount by undefined that leads to NaN as the result

You need either to set initial value for exchangeRate or prevent calculation if not all operands are given

answered Mar 1, 2021 at 13:14

Mikhail Grechka

7353 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

warnings in react.js project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related