How to set value to input field in react-CodePudding

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.

CodePudding user response：

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} />

CodePudding user response：

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