How do I get the value to be the inital value first form the data of the API and then change when the user starts typing or deleting text?
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 MyInput
https://codesandbox.io/s/compassionate-napier-3nekx?file=/src/App.js
Pass the initial length to the useState hook
const initial = dataFromApi.length
const [counter, setCounter] = useState(initial)
If you expect your API data to change you could use a useEffect hook to reset the length state when API data changes
useEffect(() => {
setCounter(dataFromApi.length);
}, [dataFromApi.length]);
and there's no need to add the initial value in the onChange handler if you want to show the current length of the entered text
setCounter(e.target.value.length)