¿Cómo obtengo que el valor sea el valor inicial primero de los datos de la API y luego cambie cuando el usuario comience a escribir o eliminar texto?
import React, {useState} from 'react' const MyInput = () => { const [counter, setCounter] = useState(0) const initial = dataFromApi.length const total = 1000 const counterChange = (e) => { setCounter(initial.length + e.target.value.length) } return( <>{counter}/{total}<input defaultValue={dataFromApi} onChange={counterChange}/></> ) } export default MyInputhttps://codesandbox.io/s/compassionate-napier-3nekx?file=/src/App.js
Pase la longitud inicial al enlace useState
const initial = dataFromApi.length const [counter, setCounter] = useState(initial)Si espera que cambien los datos de su API, puede usar un gancho useEffect para restablecer el estado de longitud cuando cambian los datos de la API.
useEffect(() => { setCounter(dataFromApi.length); }, [dataFromApi.length]);y no es necesario agregar el valor inicial en el controlador onChange si desea mostrar la longitud actual del texto ingresado
setCounter(e.target.value.length)