Myujth

I am trying to populate a form field inside a dialog and I am using redux form

Parent Component Code

constructor(props) 
 super(props);

 this.state = 
 user: ,
 student: ,
 url: false,
 permissions: 'canEdit',
 answers:,
 questions:,
 applications:,
 isAddNoteDialogOpen: false,
 application_note: 'Hey'
 
 this.toggleDialog = this.toggleDialog.bind(this);
 

componentDidMount() 
 console.log('parent');
 if(this.props.match.params.id) 

 let axiosConfig = ;
 axiosConfig.headers = 
 Authorization: 'Bearer ' + this.props.auth.token
 ;
 const url = `/application/internship/$this.props.match.params.id`
 axios 
 .get(url, axiosConfig)
 .then((response) => 

 this.setState(
 student: response.data.student,
 user: response.data.student.user,
 url: true,
 permissions: response.data.permissions,
 applications: response.data.application[0],
 answers: response.data.application[0].application_answers,
 application_note: response.data.application[0].application_note,
 questions: response.data.questions
 );

 );
 
 

child component being called from parent

<AddNoteDialog

 initialValues=application_note: this.state.application_note
 application_note=this.state.application_note
 application=applications.id
 isOpen=isChangePasswordDialogOpen
 setOpen=status =>
 this.toggleDialog(status, 'isChangePasswordDialogOpen')
 
 />

AddNoteDialogComponent

render() 
 const isOpen, setOpen, submitting, handleSubmit = this.props;

 return (
 <Dialog
 fullWidth
 open=isOpen
 onClose=() => setOpen(false)
 aria-labelledby="add-note-title"
 >
 <DialogTitle id="add-note-title">Enter Note</DialogTitle>

 <DialogContent>
 /* <DialogContentText>Some Text</DialogContentText> */
 <form
 id="add-note-details"
 onSubmit=handleSubmit(this.addNoteSubmit.bind(this))
 >
 <Grid
 container
 justify='center'
 direction='column'
 spacing=24
 >
 <Grid item xs=12>
 <Field
 name="application_note"
 component=renderTextField
 label="Note"
 type="Text"
 required
 placeholder="Enter Note"
 />
 </Grid>

 </Grid>
 </form>
 </DialogContent>
 <DialogActions>
 <LoadingButton
 variant="contained"
 color="secondary"
 type="submit"
 form='add-note-details'
 submitting=submitting
 >
 UPDATE
 </LoadingButton>
 <Button
 id="closeModal"
 color="primary"
 onClick=() => setOpen(false)
 >
 Cancel
 </Button>
 </DialogActions>
 </Dialog>
 );
 
}

export default reduxForm(
 form: 'add-note-details-form',
 validate
)(AddNoteDialogComponent);

Now when I hardcode initialValues=application_note: "Hey"
or if I set a default state then it works properly but with data coming from axios it does not show any data

Please Note :- this.state.application_note is updating and I have only pasted code which I thought was relevant but if you need anything else then do lemme know

The axios is call is asynchronous so in this line:

initialValues=application_note: this.state.application_note

this.state.application_note is probably undefined.

You have to wait for the axios request to finish and then you need to update your state and then you need to render the form.

Something like this:

componentDidMount() 
...
axios.get(url, axiosConfig)
 .then((response) => 
 this.setState(
 student: response.data.student,
 user: response.data.student.user,
 url: true,
 permissions: response.data.permissions,
 applications: response.data.application[0],
 answers: response.data.application[0].application_answers,
 application_note: response.data.application[0].application_note,
 questions: response.data.questions
 );
 );
...


render() 

 // If we don't have the application_note then we don't want to show the form.
 // We want this data so that when we do show the form initialValues will contain
 // the data we want
 if (!this.state.application_note) 
 return 'Loading...';
 
 // If we do have the data then we can return the form component.
 return (<YourFormComponent />);

The solution that worked for me was to add

enableReinitialize: true in the reduxForm() export in the Dialog component like below

export default reduxForm(
 form: 'add-note-details-form',
 validate,
 enableReinitialize: true
)(AddNoteDialogComponent);

Hope this helps somebody