I'm building simple crud app with table in reactjs by using material ui and mui-datatable. My < dummyTableComponent /> uses fetch() in componentDidMount() to fill the table with processed data. My < dummyDialogForm/>" submits data with fetch(). How should I refresh or reload my ? I can't use values from inputs to change the state of table because data is modified on server side. Any help>
dummyTableComponent
import React, { Component } from 'react'
import MUIDataTable from "mui-datatables";
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import dummyDialogForm from './dummyDialogForm';
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
class dummyTableComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
error: null
};
}
getData(){
fetch('http://localhost:8080/getAll',{
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9....'
}})
.then(response => response.json())
// .then(response => {
// console.log(response);
// })
.then(data => this.setState({ data }))
.catch((error) => {
console.error('Error:', error);
});
console.log(this.state);
}
componentDidMount() {
this.getData()
}
getMuiTheme = () => createMuiTheme({
overrides: {
MUIDataTable: {
root: {
},
paper: {
boxShadow: "none",
}
},
MUIDataTableBodyRow: {
root: {
'&:nth-child(odd)': {
backgroundColor: '#fcfeff'
}
}
},
MUIDataTableBodyCell: {
}
}
})
render() {
const columns = [
{
name: "id",
label: "ID",
options: {
filter: true,
sort: true,
sortDirection:'desc',
}
},
{
name: "description",
label: "description",
options: {
sort: true,
}
},
{
name: "name",
label: "name",
options: {
sort: true,
}
},
{
name: "perInhabitantValue",
label: "perInhabitantValue",
options: {
filter: true,
sort: true,
}
},
{
name: "value",
label: "value",
options: {
filter: true,
sort: true,
}
},
];
const {data} = this.state;
const options = {
filterType: 'multiselect',
fixedHeader: true,
};
return (
<React.Fragment>
<MuiThemeProvider theme={this.getMuiTheme()}>
<AddAuction/>
<MUIDataTable
title="title"
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
n>
</React.Fragment>
)
}
}
export default Example
dummyDialogForm
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import TextField from '@material-ui/core/TextField';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
class dummyDialogForm extends React.Component {
constructor(props) {
super(props);
this.state = {
values: {
auctionPropertyTypeId: 1,
description: "string",
inHouse: true,
interCommunityRelation : true,
name: "pp_test",
rfid: true
},
isSubmitting: false,
isError: false,
open: false
};
}
handleInputChange = e =>
this.setState({
values: { ...this.state.values, [e.target.name]: e.target.value }
});
submitForm = e => {
// console.warn(this.state)
e.preventDefault();
this.setState({ isSubmitting: true });
fetch("http://localhost:8080/setData", {
method: "POST",
body: JSON.stringify(this.state.values),
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTk0MzY4MTE5LCJleHAiOjE1OTUyMzIxMTl9.-Y6rl0vOhPCg0_ZaPoUCmoGuhZ-j5uETSs-H4bykn4QHg_3Cx2dFaHU6PFAOWAi8AdB6qu2TA18KWgVwAL2UaQ"
}
})
.then(res => {
this.setState({ isSubmitting: false });
return res.json();
})
.then(data => {
console.log(data);
!data.hasOwnProperty("error")
? this.setState({ message: data.success })
: this.setState({ message: data.error, isError: true });
})
}
openDialog() {
this.setState({ open: true });
}
closeDialog() {
this.setState({ open: false });
}
render() {
const actions = [
<Button color="primary" onClick={this.closeDialog.bind(this)}>cancel</Button>,
<Button color="primary" onClick={this.submitForm} type="submit">submit</Button>
];
return (
<div>
<Button variant="outlined" color="primary"onClick={this.openDialog.bind(this)}><AddCircleOutlineIcon color="primary"></AddCircleOutlineIcon> Przetarg </Button>
<Dialog open={this.state.open} fullScreen>
<DialogTitle>Przetarg</DialogTitle>
<DialogContent>
<form onSubmit={this.submitForm}>
<TextField
name="description"
id="description"
label="opis"
value={this.state.values.email}
onChange={this.handleInputChange}
title="opis"
required
/>
</form>
</DialogContent>
<DialogActions>
{actions}
</DialogActions>
</Dialog>
</div>
);
}
}
export default dummyDialogForm
In the closest parent component of both components, create a refreshTable() function that refreshes the data from your server.
Then pass this function as props to any child component that needs to trigger it, such as:
<dummyDialogForm refreshTable={this.refreshTable} />
Then, in dummyDialogForm, when the data is submitted, you can do
this.props.refreshTable()
This also means this part:
getData(){
fetch('http://localhost:8080/getAll',{
should not be in dummyTableComponent anymore. It should be in the parent component and the data should be passed to dummyTableComponent as props. You would then have a more robust architecture with the parent component being the controller, all the logic in one place, and the sibling sub-components taking care only about displaying whatever props are passed to them by the parent controller.