I am pretty new to Reactjs. I am using Material UI Dialog to show a Dialog Box where user add some info and hits a POST API. When this process is done the dialogs get closed but I want to add the info that has been added without page reload. I have a GET API which is populating data.

Here's how my components look like:

App.js
  <>
  <Navbar />
  <ListJobs />
</>


Navbar.js
<Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                    Reconstruction 2.0
                </Typography>
                <Button onClick={handleOpenDirectory} color="inherit">Add New Project</Button>
            </Toolbar>
        </AppBar>
        {openDirectory && <AddProject
            open={openDirectory}
            onClose={handleCloseDirectory}
        />}
    </Box>



AddProject.js
 <Dialog open={open} onClose={onClose}>
            <div className='addProjectCard'>
                <h2>Add Project</h2>
                <div className="container">
                    <TextField label="Project Name" variant="standard" value={projectName} onChange={onNameChange} />
                </div>
                <div className="container">
                    <label className="labelHeading">Images</label>
                    <input type="file" multiple accept="image/*" onChange={onImageChange} required />
                </div>
                <div className="container">
                    <label className="labelHeading">YAML Files</label>
                    <input type="file" accept=".yaml" onChange={onYamlFileChange} required />
                </div>
                <div className="actionContainer">
                    <div>Upload Progress is {progress}%</div>
                    <button onClick={() => uploadFiles()}>Upload</button>
                </div>
            </div>
        </Dialog>

This is the code which is displaying table:

const ListJobs = () => {
const [jobData, setJobData] = useState([]);
const [status, setStatus] = useState([]);


useEffect(() => {
    const getAllJobs = () => {
        axios.get(baseURLJobs).then((response) => {
            setJobData(response.data);
        });
    }
    getAllJobs();
}, []);

useEffect(() => {
    const interval = setInterval(() => {
        const getStatus = () => {
            axios.get(baseURLStatus).then((response) => {
                setStatus(response.data);
            });
        }
        getStatus()
    }, 30000)
    return () => clearInterval(interval)
}, [status]);


for (var i in jobData) {
    for (var j in status) {
        if (jobData[i].id == status[j].id) {
            jobData[i].jobStatus = status[j].jobStatus
            console.log("May be updated: ", jobData)
        }
    }
}

return (
    <div>
        <table>
            <thead>
                <tr>
                    <th style={{ width: "20%" }}>Job Title</th>
                    <th style={{ width: "27%" }}>Job Name</th>
                    <th style={{ width: "20%" }}>Date</th>
                    <th style={{ width: "21%" }}>Job Status</th>
                    <th style={{ width: "12%" }}>Actions</th>
                </tr>
            </thead>
            <tbody>
                {jobData.map((item, i) => (
                    <tr key={i}>
                        <td>{item.jobTitle}</td>
                        <td>{item.jobName}</td>
                        <td>{item.jobCreation}</td>
                        <td>{item.jobStatus}</td>
                        <td><ActionMenu index={item} /></td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>)
}

How can I update the list page if a job is added. I have been stuck in this from past 2 weeks. Any help would be really appreciated.

CodePudding user response：

1, Move your state to app.js:

const [jobData, setJobData] = useState([]);

2, pass the setJobData() function to your child which will update the jobData. such as AddProject.js.

3,pass jobData as a parameter to ListJobs