Mutable values in render

[oliverjam]

week10-Joe-Ivo/src/components/log-in.js

Line 6 in 22b8511

let popup = undefined;

If you need to have a variable that you can mutate and maintain the value of across renders (e.g. popup here) React has a hook called useRef. It's designed for values that you don't want to recreate on every render—kind of like opting out of the state-based render cycle.

So this

const popup = React.useRef(null);
// ...
console.log(popup.current)

If you just use a normal variable like you've got then it'll get recreated whenever this component re-renders, which you probably don't want.

[oliverjam]

@Joepock123 did you run this to test? From looking at the change it shouldn't work.

React refs are objects with a .current property that refers to the current value. So you'll need to change wherever you reference popup to popup.current