Question 72504 in Reactjs Question posted in
The new location for the React Documentation can be found here.

my useState array doesn't update using spread method even when i'm doing to a copy array – Reactjs

 export default function Calculator(props){
    const [userInput, setUserInput] = useState('')
    const [operator,setOperator]= useState('')
    const [equationNumbers,setEquationNumbers] = useState([])
    const [result, setResult]= useState(0)

    
    /* doing the operation + - * / to the result array element  */
    function Calculate(operator){
        /* if user want to do add operation */
        if (operator === '+'){
            setResult(equationNumbers[0] + equationNumbers[1])
            setUserInput(result)
        }
    }
    /* handle operation either on keyBoard or calculator bad */
    function handleAddingOperation(e){
        e.preventDefault()
        repeatPressingOperation('if you want possitive number, use plaeas the switch button')
        setOperator('+')
        // equationNumbers.push(Number(userInput))
        let NewNum = [Number(userInput)]
        setEquationNumbers(NewNum)
        console.log(NewNum)
        setUserInput('')
    }

    function handlePressingEnterKeyOrEquallButton(e){
        e.preventDefault()
        repeatPressingOperation('you did not enter any number please try again')
        let NewNum = [
            ...equationNumbers,
            Number(userInput)
        ]
        setEquationNumbers([
            ...NewNum,
            Number(userInput)
        ])
        setUserInput('') 
        console.log(NewNum)
        console.log(equationNumbers)
        Calculate(operator)
        clearAllData()     
    }

    /* handle the user input inside the input field and doing operations such:+, - , /.*/
    function handleKeyDown(e){
        if(e.key === '+'){
            handleAddingOperation(e)
        }    
        else if(e.key === 'Enter'){
            handlePressingEnterKeyOrEquallButton(e)
        }       
    }

i tried to update the equationNumbers state using a NewNum array ‘ a copy of equationNumbers’ then using … method but when i console.log it. it shows only one index ‘userinput’ when it should has two ‘the first input when user pressing + and the second userinput when pressing enter button ‘. so i was doing it by push method but i knew it not good because it mutates the state.

Tags:

2

Answers


  1. 0

    You’re correct that you shouldn’t use push but create a new error with concat or in the way you did it.

    Your error stems from something different:
    console.log(equationNumbers) in the callback logs the equationNumbers value from the time the callback was created. It doesn’t reflect the latest changes. equationNumbers was inlined, the callback contains more or less a "snapshot" from the moment the method was created.

    Move the line console.log(equationNumbers) into the main function body and see how it changes when you enter something on every re-rendering. If this doesn’t solve the issue, please reduce the example – you posts contains way too much code which is completely unrelevant for the question asked, and it’s hard to see through it this way.

    Login or Signup to reply.
  2. 0

    I think you’re a little confused with the array state update.
    Do this on both your handle functions:

    let newNum = Number(userinput);
setEquationNumbers([
   ...equationNumbers,
   newNum
]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search