0

I'm having an issue in a simple React application; when I click a button, the onClick event is not fired properly on the first click. This has something to do with when the state is updated and when I call console.log(), but I'm not sure how to correct it. How do I get the onClick event in the code below to fire as it should on the first click?

This is a calculator app. When I click, say, the "9" button. The console prints, "". When I click "9" again, the console correctly prints "9," and will correctly print any other key I press thereafter.

import styled from 'styled-components';
import OutputScreen from './OutputScreen';
import FormulaScreen from './FormulaScreen';
import Keypad from './Keypad';
import { useState } from 'react';

export const CalcPadStyles = styled.div`
  background-color: black;
  width: 334px;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 29px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -210px 0 0 -167px;
  padding: 10px;
`;

const Calculator = () => {
  const [pressedKey, setPressedKey] = useState('');
  const [calcInput, setCalcInput] = useState(0);

  function handleClick(e) {
    e.preventDefault();
    const outputValue = e.target.innerText;
    setPressedKey(outputValue);
    console.log(pressedKey);
  }

  return (
    <CalcPadStyles>
      <FormulaScreen />
      <OutputScreen output={pressedKey} />
      <Keypad clicked={e => handleClick(e)} />
    </CalcPadStyles>
  );
};

export default Calculator;
Xenilo
  • 25
  • 5
  • Try changing `e.target.innerText` to `e.currentTarget.innerText` – Wolfie Mar 12 '21 at 20:43
  • What does `` do with `clicked` attribute? – T J Mar 12 '21 at 20:43
  • Or even better, when the keypad is clicked, pass the associated number to `clicked` instead of passing the html element. – Wolfie Mar 12 '21 at 20:44
  • Thank you. That did not work, however. – Xenilo Mar 12 '21 at 20:45
  • 3
    `useState` doesn't reflect a change immediately: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately – jnpdx Mar 12 '21 at 20:45
  • As jnpdx said, it probably works properly. Put the console.log above the return statement, outside of the function itself. It would likely show the value you expect. – FarahZaqout Mar 12 '21 at 20:47
  • Right now, I'm using "prop drilling"...will set up useContext or implement a redux store later. Keypad component sends props to Keys, which sends them on to Key, where the event is passed to the callback function and then handled in the Calculator component. – Xenilo Mar 12 '21 at 20:47
  • Your code is absolutely correct and it should be properly reflecting the number when you click on the numbers just that the setPressedKey function is async so it is reflecting on the 2nd click if you render the output variable anywhere in the OutputScreen component and check it will be working as expected, – Sahil Paudel Mar 12 '21 at 21:01
  • The state does not show up in the OutputScreen component when it updates in the Calculator component. The OutputScreen simply remains blank. – Xenilo Mar 12 '21 at 21:19
  • I put the console.log() right above the return statement, and it appears to be working. I then fixed an error in my OutputScreen component. Everything seems to be working now. Thanks, Everyone! – Xenilo Mar 12 '21 at 21:28

0 Answers0