Change one charter in state while typing

I have a state:

const [numIndexZero, setNumIndexZero] = useState("****");

And I have an input that I type 4 numbers.

How can I change each charter when i typing a number?

Meaning that, if I type "1" then the state will be "1***" .

If I type "12" then the state will be "12**" ,

If I type "123" then the state will be "123*" ,

If I type "1234" then the state will be "1234".

Any help??

CodePudding user response：

You can do it by using padEnd methid like this:

<input onChange={(e)=>setNumIndexZero(e.target.value.padEnd(4,"*"))} .../>

CodePudding user response：

Calling setState with the value directly updates the value. For eg:

setNumIndexZero('1***');
setNumIndexZero('12**');