How can I load my initialvalue in my form input?

I need to create a modify feature on a value. I have the input setup inside a modal but for some reason I can't seem to pass on the value to the initialValues.

My code starts with ActivityAreas

<Datatable          ref={this.datatable}          rows={this.props.activityAreas}          update={this.props.updateTable}          headers={[            {              key: 'name',              title: () => t('entities.activityAreas.name'),            },            {              key: 'action',              title: () => t('entities.activityAreas.action'),              render: (_, row) => (                <Flex>                  <ClickableLink onClick={() => this.openModalDestroy(row) }>                    {t('entities.activityAreas.destroy')}                  </ClickableLink>                  <ClickableLink onClick={() => this.openModalRename(row) }>                    {t('entities.activityAreas.rename')}                  </ClickableLink>                </Flex>              ),              props: { align: 'right' },            }          ]}          type={ACTIVITY_AREAS}        />  

The line that says this.openModalRename(row)

contains the actual line object with name and id. openModalRename looks like this right now

openModalRename = (row) => {      let modalProps = this.modalProps;      modalProps.row=row;      this.props.setModal(RenameActivityArea, modalProps, { width: '500px' })  }  

It sends the data to the RenameActivityArea page

That page looks like this:

const RenameActivityArea = ({  values,  handleSubmit,  handleChange,  isValid,  hideModal,  isSubmitting,  setFieldValue,  ...props  }) => {  const input = (name, inputProps) => (  <Input {...getFormInputProps({      handleSubmit,      handleChange,      values,      isValid,      ...props,      }, name, inputProps)}  />  )  return (      <Form onSubmit={handleSubmit}>      <Header.H2>{t('settings.activityAreas.modActivityAreas')}</Header.H2>      {input('name', { label: 'activityAreas.ActivityAreaName'})}      <ButtonRow flex="0 0 auto" flow="row" justify="flex-end" padding="10px 0px">          <Button type="button" outline onClick={hideModal}>Fermer</Button>          <Button loading={isSubmitting} disabled={!isValid} onClick={handleSubmit}>{t('entities.activityAreas.save')}</Button>      </ButtonRow>      </Form>  )  }    const initialValues = {  name: ''  }    const mapState = ({ entities }) => ({      activity_area: entities.activity_area,  })    const mapDispatch = dispatch => ({      onSubmit: activity_area => dispatch(updateActivityAreas(activity_area)),  })    RenameActivityArea.propTypes = {      modalProps: PropTypes.shape(),      handleSubmit: PropTypes.func,      handleChange: PropTypes.func,      hideModal: PropTypes.func,      isSubmitting: PropTypes.bool,      handleBlur: PropTypes.func,      errors: PropTypes.shape(),      touched: PropTypes.shape(),      isValid: PropTypes.bool,  }    const FormWrapped = withForm({      mapPropsToValues: () => initialValues,      validateOnChange: false,      validateOnBlur: true,      validationSchema: schema,      afterSubmit: (values, formik) => formik.props.afterModalSubmit(values, formik),  })(RenameActivityArea)    const Connected = connect(mapState, mapDispatch)(FormWrapped)    export default Connected  

I can get the value inside the box if I do this:

<Input {...getFormInputProps({      handleSubmit,      handleChange,      values: props.row, // <- This gives the value      isValid,      ...props,      }, name, inputProps)}  />  

But then for some reason, I can't seem to be allowed to modify the value inside the input. It's like if it was read only or something. I am not sure thats the right way of approaching this anyway.

https://stackoverflow.com/questions/66788156/how-can-i-load-my-initialvalue-in-my-form-input March 25, 2021 at 03:37AM