React JS Button will not fire off the first time. Always have to click if first

Question

Seems like a simple solution, and there is quite a lot of people that have the same question but the solutions don't make any sense to me. Whenever I click the button {rate} consolelogs blank the first time and then gives me a proper number the second time.

Here is the code:

import { useState } from 'react';
import './App.css';

function App() {


  const [from, setFrom] = useState('')
  const [to, setTo] = useState('')
  const [rate, setRate] = useState('')

  const calculate = () => {
  fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json`)
  .then(response => response.json())
  .then(data => {
    setRate(data[from][to])
    
  })

  console.log(rate)

  }
  

  return (
    <div className="App">
      <div className="container">
      <input type="text" className="from" onChange={(e) => (setFrom(e.target.value))} />
      <input type="text" className="to" onChange={(e) => (setTo(e.target.value))} />
      <button onClick={() => calculate()}>calculate</button>
      </div>
    </div>
  );
}

export default App;

Lmk what you guys think about it! anything will be appreciated. Thank you!

does this answer your question? https://stackoverflow.com/a/66876077/18457414 — mocherfaoui, Aug 09 '22 at 23:40
why dont you just bind your function like this instead `onClick={calculate}` — Amir Rahman, Aug 09 '22 at 23:47

score 3 · Accepted Answer · edited Aug 12 '22 at 08:56

3

Fetching data and setting state are both asynchronous, so you end up console logging the empty state at first. You can use useEffect to console log the state only when it is changed. P.S. Do not put the useEffect inside your calculate function.

useEffect(() => {
   console.log(rate)
}, [rate])

edited Aug 12 '22 at 08:56

vimuth

5,064
33
79
116

answered Aug 09 '22 at 23:54

Nver Khachoyan

46
4

1

that worked! thank you Nver Khachoyan and Amir Rahman for your responses! A huge help! – AlejandroV Aug 10 '22 at 00:26

score 1 · Answer 2 · answered Aug 10 '22 at 00:02

its the common mistake every react beginner does you are thinking that setRate is updating state immediately so you can call rate in the next line setRate is running in async way so when you reach console.log rate is still not updated

what you can do to track a state to detect when it changes is to use useEffect hook you can study here useEffect

NOTE THAT setState functions behave like async functions that executes separately from code sequence

  useEffect(() => {
      console.log(rate)
  },[rate]);

React JS Button will not fire off the first time. Always have to click if first

2 Answers2