react-step-progress icon indicating copy to clipboard operation
react-step-progress copied to clipboard

Validator and state in React.

Open charlo-chopin opened this issue 4 years ago • 2 comments

Hi, I implemented step validator returning a hook state. But when the function is called, triggered by the "next" button, the state used in the validator is an old one, corresponding to the state during Its declaration in useEffect rule.

It seems the validation implementation doesn't support the changes state related to a hook, and only allows Its scope logic.

Do you know how I can use validator to return a boolean depending of state ? For instance return a variable passed by child component.

Thanks for help and don't hesitate if you need some payloads.

charlo-chopin avatar Oct 14 '20 10:10 charlo-chopin

I've experienced the same issue, what solved it for me was using useRef for example

const [isValid, setIsValid] = useState(false)
const curIsValid = useRef(isValid);
curIsValid.current = isValid;

const steps = [
   ...
   {
      label: 'Test',
      validator: () => curIsValid.current,
   }
]

r-bt avatar Dec 16 '20 20:12 r-bt

I've experienced the same issue, what solved it for me was using useRef for example

const [isValid, setIsValid] = useState(false)
const curIsValid = useRef(isValid);
curIsValid.current = isValid;

const steps = [
   ...
   {
      label: 'Test',
      validator: () => curIsValid.current,
   }
]

Thank you. I've been working with this library and spent several hours looking for an answer.

fernando-pineda avatar Apr 05 '21 20:04 fernando-pineda