initialValues in react-hook compoenent Form

Question

I have below sample code Form with initial data supplied. If i refactored to Class component the form ins pre-populated, but when i use hooks, nothing comes forth.

const ActivitiesForm = ({ goBackButton }) => {
    const { items, initialValues } = useSelector((state) => {
        return {
            initialValues: state.data,
            items: state.items,
        }
    })

    const [activityName, setActivityName] = useState(

        initialValues ? initialValues.activityDescription : ''
    )
    const handleInputName = (e) => setActivityName(e.target.value)



    return (
        <div>

            <Form
                onSubmit={handleSubmit(handleSubmit)}
                className='ui form'
                >

                    <Field
                        component={ConstructField('input')}
                        onChange={handleInputName}
                        label='Activity Name'
                        name='activityName'
                        placeholder='Activity Name'
                    />


                            <Button
                                negative
                                onClick={() => handleSubmit_('del')}
                            >
                                Delete the Youth
                            </Button>

            </Form>
        </div>
    )
}


const activityform = reduxForm({
    form: 'activityform',
    enableReinitialize: true,
})(ActivitiesForm)

export default activityform

Answer 1

try to use useEffect hook like this:

useEffect(() => {
  if(initialValues){
     setActivityName(initialValues.activityDescription);
  }
}, [initialValues)