How to set the value to the input field in react. Data is fetching from firebase. I was trying to fetch data from the firebase and then data is populated to the input field. But data is sometimes set to input field sometimes not.
You have to fill your data into a local state using useState. Here is the general idea. Can't go into more details without code example from your side.
For example:
const [value, setValue] = useState('')
Then in your useEffect fetching the data:
useEffect(() => {
const data = fetch('gettingdata') // replace by the way you get your data
setValue(data)
}, []}
Then in your input:
<input value={value} onChange={manageYourValueChange} />
You can use the useRef hook to avoid unnecessary rerender:
import {useRef, userEffect} from 'react'
const Test:React.FC = () => {
const inputRef = useRef(null)
userEffect(() => {
const resp = yourAsyncGetData()
inputRef.current.value = (resp)
}, [])
return <input ref={inputRef} />
}
export default Test