I am struggling to update the state and component in my code. When I press a button and change the value of one of the props in the popup component, the prop value does not get updated. I suspect this issue is due to using setState. I researched a possible solution using the useEffect hook, but I'm having trouble implementing it. Here's the code snippet:
My objective is to transition from the form with Data0 prop to have a Data1 prop, however, the prop doesn't seem to update at all. I'm trying to simulate multiple clicks on objects, resulting in an update in the formData value. The parent component is app.js and the child component is the popup, which should display "Bob" and a specific date rather than just the original name and date strings.
import React, { useState, useEffect } from 'react';
import './App.css';
import FormDialog from './component/popup'
import Button from '@material-ui/core/Button';
function App() {
const Data0 = { name:'original name', date:'original date' }
const Data1 = { name:'Bob', date:'1939' }
const [formStatus, setFormStatus] = React.useState(false);
const [formData2, setFormData2] = useState(Data0)
const [tempForm, setTempForm] = useState(<FormDialog formStatus={formStatus} handelForm={() => handleForm()} Data0={Data0}/>)
const handleForm = () => {
const tempForm = <FormDialog formStatus={formStatus} handelForm={() => handleForm()} Data0={Data1}/>
setTempForm(tempForm);
};
useEffect(() => {
const tempForm = <FormDialog formStatus={formStatus} handelForm={() => handleForm()} Data0={Data1}/>
setTempForm(tempForm);
setFormStatus(!formStatus);
console.log('formData2 EFFECT', formData2)
setTempForm(tempForm);
setFormStatus(!formStatus);
setFormStatus(!formStatus);
}, [formData2]
);
return (
<div className="App">
<h1 align="center">React-App</h1>
<h4 align='center'>Render Custom Component in Material Table</h4>
<Button variant="outlined" color="primary" onClick={() => handleForm()}>
Vendor row
</Button>
{tempForm}
{formData2.billingVendor}
</div>
);
}
export default App;
export default function FormDialog (props) {
let [Data, setData] = React.useState(props.Data0);
return (
<React.Fragment>
<Dialog
maxWidth='lg'
open={props.formStatus}
aria-labelledby="max-width-dialog-title"
disableBackdropClick={true}
disableEscapeKeyDown={true}
>
<DialogTitle className={classes.title}>{Data.name}</DialogTitle>
<Divider />
<DialogContent>
<DialogContentText>
Please be cautious when updating the fields below.
</DialogContentText>
<form noValidate>
<FormControl className={classes.formControl} fullWidth={true}>
<div className={classes.root}>
<TextField
fullWidth
label='Date'
style={{ margin: 8 }}
disabled
value={Data.name}
variant="outlined"
/>
<br/>
<TextField
fullWidth
label='Date'
style={{ margin: 8 }}
disabled
value={Data.name}
variant="outlined"
/>
<br/>
<TextField
fullWidth
style={{ margin: 8 }}
disabled
value={Data.date}
variant="outlined"
/>
<br/>
<TextField
fullWidth
style={{ margin: 8 }}
disabled
value={Data.date}
variant="outlined"
/>
<br/>
</div>
</FormControl>
</form>
</DialogContent>
<DialogActions>
<Button onClick={() => props.handleForm()} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}