Tengo un componente de entrada de reacción que solo debe tomar números y comas. Pude restringir que los usuarios insertaran caracteres, también pude obtener los números con comas en useState. Pero quiero mostrar comas en la entrada aunque los usuarios no las pongan. Por ejemplo, si un usuario ingresa 100 000, la entrada se volverá a representar automáticamente a 100 000 en cada onChange.

A continuación se muestra mi código:

 const regex = new RegExp("^[0-9,]*$"); const [homePrice, setHomePrice] = useState( "100,000"); const onChangeHomePrice = (e) => { setHomePrice(e.target.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); console.log(homePrice); }; return ( <FormInput type="text" maxLength={10} value = {homePrice} placeholder="100,000" onChange={onChangeHomePrice} onKeyPress={(e) => { if (!regex.test(e.key)) { e.preventDefault(); } }} > </FormInput> )

¿Cómo puedo volver a representar la entrada con las comas adecuadas? En mi código, cuando pongo console.log(homePrice), puedo ver las comas. Entonces, puse homePrice como valor de entrada:

valor = {precio de la casa}.

Pero esto no cambia la entrada del usuario con las comas adecuadas.