CODEWITHSUNDEEP
javascriptreactjsreact-hooks
some_new_dev_dude
some_new_dev_dude

Reputation: 59

Why does react show previous value onclick,

I have 3 array of objects that i am trying to console log. Whenever the array is changed(via a button click from a separate component) I simply want to log the array of objects associated with the clicked button.

But there's some delayed reaction going on

EXAMPLE:

WHAT I AM EXPECTING:

HOW IT IS ACTUALLY PERFORMING:

its always 1 behind what it should be.

CODE:

  // These variables are being passed in as props ->  
getKpiResolvedTix, 
getKpiCanceledTix,
getKpiClosedTix

const [newKpiTixArr, setNewKpiTixArr] = useState<any>([])

  const renderCsvData = () => {
    if (getKpiResolvedTix) {
      setNewKpiTixArr(getKpiResolvedTix)
    } else if (getKpiCanceledTix) {
      setNewKpiTixArr(getKpiCanceledTix)
    } else if (getKpiClosedTix) {
      setNewKpiTixArr(getKpiClosedTix)
    }
}

  useEffect(() => {
    renderCsvData()
    console.log(newKpiTixArr)
  }, [getKpiResolvedTix, getKpiCanceledTix, getKpiClosedTix])

CODE EXPLANATION:

//each of the 3 "get" variables are props. essentially
when a button is clicked the tickets are filtered
to show only those tickets. 

//essentially if you click the resolve button -> it will
display all tickets with a resolved status. behind
the scenes this is an array of ticket objects.
  getKpiResolvedTix,
  getKpiCanceledTix,
  getKpiClosedTix

Upvotes: 0

Views: 1759

Answers (2)

HuSaad
HuSaad

Reputation: 210

try spreading the arrays when set state as showed bellow

const renderCsvData = () => {
    if (getKpiResolvedTix) {
      setNewKpiTixArr([...getKpiResolvedTix])
    } else if (getKpiCanceledTix) {
      setNewKpiTixArr([...getKpiCanceledTix])
    } else if (getKpiClosedTix) {
      setNewKpiTixArr([...getKpiClosedTix])
    }
}

Upvotes: 0

Mustafa
Mustafa

Reputation: 353

That's because useEffect is running your console.log() before updating the state which is newKpiTixArr.

to fix that you either place your console.log(newKpiTixArr) outside of a useEffect this way it will be logged each time the component re-renders. or if you want to log it only when it changes then add another useEffect that listens to changes only on newKpiTixArr state and place your console.log() inside it. like this below

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

Upvotes: 1

Related Questions