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.
1
-
Can you please provide some code?ldruskis– ldruskis2022-02-07 15:22:04 +00:00Commented Feb 7, 2022 at 15:22
Add a comment
|
2 Answers
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} />
Comments
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
