React - unable to set value in setResult state variable

As i have created a calculator and when i pass 5*-+5 value what want to remove *- from the variable so it can perform the only 5+5, but i was manage to remove *- but was unable to setResult state variable with new value that is 5+5.
you see that in line 34.

import './App.css'
import { useState, useEffect } from 'react'

function App() {
  const [input, setInput] = useState('0')
  const [result, setResult] = useState('0')
  const [final, setFinal] = useState('')
  const operator = ['/', '*', '-', '+']
  const numberEle = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']


  const handleNumber = (e) => {
    const number = e.target.textContent

    const reset = () => {
      setResult('0')
      setInput('0')
      setFinal('')
    }

    if (number === '=') {
      let flag = true

      if (flag) {
        let str = result
        for (let i = 0; i < str.length; ++i) {
          if (operator.includes(str[i])) {
            if (operator.includes(str[i])) {
              str = str.slice(0, i) + str.slice(i + 1, str.length)
              console.log(str)
            }
          }
        }
        console.log(str + 'sdad' + eval(str))
//problem here
        setResult(str)
        //flag = false
      }

      console.log(result)
      const calculatedValue = eval(result)
      setInput(result)
      setFinal(calculatedValue)
      setResult(calculatedValue)
      return
    }

    if (result === '0') {
      if (number !== 'AC') {
        setResult(number)
        setInput(number)
      }
      return
    }

    if (number === 'AC' && result) {
      reset()
      return
    }

    if (operator.includes(number)) {
      setResult(result + '' + number + '')
      setInput(number)
    }

    if (numberEle.includes(number)) {
      let prevNumber = ''
      if (!operator.includes(input)) {
        prevNumber = input

        setInput(prevNumber + number)
      } else {
        prevNumber = ''
        setInput(number)
      }
      setResult(result + number)
    }

    if (number === '.') {
      /*const array = result.split(' ')

      const lastElement = array[array.length - 1]

      if (!lastElement.includes('.')) {
        setResult(result + '.')
      }*/

      const lastChat = result.charAt(result.length - 1)

      if (!result.length) {
        setInput('0.')
        setResult('0.')
      } else {
        if (lastChat === '*' || operator.includes(lastChat)) {
          setInput('0.')
          setResult(`${result} 0.`)
        } else {
          setInput(
            lastChat === '.' || input.includes('.') ? `${input}` : `${input}.`
          )
          const formattedValue =
            lastChat === '.' || input.includes('.') ? `${result}` : `${result}.`
          setResult(formattedValue)
        }
      }
    }
  }

  useEffect(() => {
    if (final) setInput(final)
  }, [final])

  return (
    <div className='App container-fluid'>
      <div className='main-box '>
        <div className='text-white display'>
          <div className='display-current'>{result}</div>
          <div className='display-result' id='display'>
            {input}
          </div>
        </div>
        <div className='bottom-box container-fluid text-white'>
          <div className='row'>
            <div className='col-6 rg-w-50 rg-red rg-regular'>
              <button id='clear' onClick={handleNumber}>
                AC
              </button>
            </div>
            <div className='col rg-darkgrey rg-regular'>
              <button id='divide' onClick={handleNumber}>
                /
              </button>
            </div>
            <div className='col rg-darkgrey rg-regular'>
              <button id='multiply' onClick={handleNumber}>
                *
              </button>
            </div>
          </div>
          <div className='row'>
            <div className='col rg-grey rg-regular'>
              <button id='seven' onClick={handleNumber}>
                7
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='eight' onClick={handleNumber}>
                8
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='nine' onClick={handleNumber}>
                9
              </button>
            </div>
            <div className='col rg-darkgrey rg-regular'>
              <button id='percent' onClick={handleNumber}>
                %
              </button>
            </div>
          </div>
          <div className='row'>
            <div className='col rg-grey rg-regular'>
              <button id='four' onClick={handleNumber}>
                4
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='five' onClick={handleNumber}>
                5
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='six' onClick={handleNumber}>
                6
              </button>
            </div>
            <div className='col rg-darkgrey rg-regular'>
              <button id='subtract' onClick={handleNumber}>
                -
              </button>
            </div>
          </div>
          <div className='row'>
            <div className='col rg-grey rg-regular'>
              <button id='one' onClick={handleNumber}>
                1
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='two' onClick={handleNumber}>
                2
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='three' onClick={handleNumber}>
                3
              </button>
            </div>
            <div className='col rg-darkgrey rg-regular'>
              <button id='add' onClick={handleNumber}>
                +
              </button>
            </div>
          </div>
          <div className='row'>
            <div className='col-6 rg-grey rg-w-50 rg-regular'>
              <button id='zero' onClick={handleNumber}>
                0
              </button>
            </div>
            <div className='col rg-grey rg-regular'>
              <button id='decimal' onClick={handleNumber}>
                .
              </button>
            </div>
            <div className='col rg-blue rg-regular'>
              <button id='equals' onClick={handleNumber}>
                =
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

First of all, please, for the love of the flying spaghetti monster, please don’t make this one huge component. You have one component that is over 200 lines long and your handler function itself is over 100 lines long. How is someone supposed to debug this? I would say that the ideal length for a component files is 5-50 lines, 100 is pushing it. The ideal length for a function is 1-20 lines, 40 is pushing it.

i was manage to remove *-

Really? When I log it out it looks like 5-5 to me.

This isn’t doing what you think:

        for (let i = 0; i < str.length; ++i) {
          if (operator.includes(str[i])) {
            if (operator.includes(str[i])) {
              str = str.slice(0, i) + str.slice(i + 1, str.length)
            }
          }
        }

But the real question I think, is that when you get to this block of code:

      setInput(result)
      setFinal(calculatedValue)
      setResult(calculatedValue)

Why doesn’t result have the new value we just gave it? Because (afaik), state values are not updated until the next render. So, you either need to keep a local copy of the value to use or you have to trigger off that change with a useEffect.




And why the nested ifs?

For that matter? What is this doing?

      let flag = true

      if (flag) {