How to insert data from DB inside a MDB Table? - reactjs

Question

I'm new in React and I have to create a CRUD table for my DB.
I created a simple table as you can see:
class ListPromoCatalog extends React.Component {
constructor(props) {
super(props);
this.state = {
promos: [],
message: null
};
this.refreshPromo = this.refreshPromo.bind(this)
}
componentDidMount() { //React defines a component lifecycle
this.refreshPromo();
}
refreshPromo() {
PromoCatalogService.retrieveAllPromo(PRIZES)//this would make the call to the REST API.
.then(
response => {
console.log(response);
this.setState({promos: response.data.viaggio})
}
)
}
PromoOffClicked(id) {
PromoCatalogService.promoOff(PRIZES, id)
.then(
response => {
console.log(response);
this.setState({message: `Promo ${id} OFF Successful`});
this.refreshPromo();
}
)
}
updatePromoClicked(id) {
console.log('update ' + id);
this.props.history.push(`/promos/${id}`);
}
addCourseClicked() {
this.props.history.push(`/promos/-1`);
}
render() {
return (
<div className="container">
<h3>All Promo</h3>
<div className="row">
<FileUploader/>
</div>
{this.state.message && <div className="alert alert-success">{this.state.message}</div>}
<div className="container">
<table className="table">
<thead>
<tr>
<th>Id</th>
<th>Item</th>
<th>Title</th>
<th>Description</th>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
{
this.state.promos.map(
promo =>
<tr key={promo.promoId}>
<td>{promo.promoId}</td>
<td>{promo.ijCod}</td>
<td>{promo.title}</td>
<td>{promo.description}</td>
<td>
<button className="btn btn-warning"
onClick={() => this.PromoOffClicked(promo.promoId)}>OFF
</button>
</td>
<td>
<button className="btn btn-success"
onClick={() => this.updatePromoClicked(promo.promoId)}>Update
</button>
</td>
</tr>
)
}
</tbody>
</table>
<div className="row">
<button className="btn btn-success" onClick={this.addCourseClicked}>Add</button>
</div>
</div>
</div>
)
}
}
export default ListPromoCatalog
I would like to do the same thing with a Material Table but I don't know how to put data and methods in my new class.
I would like to do the same thing with a Material Table but I don't know how to put data and methods in my new class.
render() {
return (
<>
<PanelHeader size="sm"/>
<div className="content">
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<CardTitle tag="h4">Simple Table</CardTitle>
</CardHeader>
<CardBody>
<MDBDataTable
striped
bordered
small
data={data} //DATA SHOULD CONTAIN HEADERS AND COLUMNS
/>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
);
}