a question the code below executes the display of a tabel with reactstrap, when I execute the search it makes a rest call to the backend and returns an array with a series of values inside, what I want to do is reload the table on loading of values from the backend, how can I implement this? when the text changes, the handleChange function is called which loads the values and inserts them into the array that is displayed in the table, but after this operation I have to make sure to recreate the table, how can I implement this?
React Code:
import React from "react";
import {
Row,
Col,
Table,
Progress,
Button,
UncontrolledButtonDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
Input,
Badge,
InputGroupAddon,
InputGroupText,
InputGroup,
FormGroup,
} from "reactstrap";
import { Sparklines, SparklinesBars } from "react-sparklines";
import Widget from "../../../components/Widget";
import s from "./Static.module.scss";
import {ricercaclienti} from "../../../services/cliente";
class Static extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
this.state = {
tableStyles: [
{
id: 1,
picture: require("../../../images/tables/1.png"), // eslint-disable-line global-require
description: "michele rusco",
info: {
type: "JPEG",
dimensions: "200x150",
},
date: new Date("September 14, 2012"),
size: "45.6 KB",
progress: {
percent: 29,
colorClass: "success",
},
},
{
id: 2,
picture: require("../../../images/tables/2.png"), // eslint-disable-line global-require
description: "The Sky",
info: {
type: "PSD",
dimensions: "2400x1455",
},
date: new Date("November 14, 2012"),
size: "15.3 MB",
progress: {
percent: 33,
colorClass: "warning",
},
},
],
};
this.checkAll = this.checkAll.bind(this);
}
parseDate(date) {
this.dateSet = date.toDateString().split(" ");
return `${date.toLocaleString("en-us", { month: "long" })} ${
this.dateSet[2]
}, ${this.dateSet[3]}`;
}
checkAll(ev, checkbox) {
const checkboxArr = new Array(this.state[checkbox].length).fill(
ev.target.checked
);
this.setState({
[checkbox]: checkboxArr,
});
}
//Function call con text change
async handleChange(event) {
let searchtext = event.target.value;
var result=await ricercaclienti(searchtext);
for(var i=0; i<result.length; i++){
var value={
id: i,
picture: require("../../../images/tables/2.png"), // eslint-disable-line global-require
description: result[i].RagioneSociale,
info: {
type: "PSD",
dimensions: "2400x1455",
},
date: new Date("November 14, 2012"),
size: "15.3 MB",
progress: {
percent: 33,
colorClass: "warning",
}
};
this.state.tableStyles.push(value);
}
console.log("Testo ricercato: "+result.length);
}
changeCheck(ev, checkbox, id) {
this.state[checkbox][id] = ev.target.checked;
if (!ev.target.checked) {
this.state[checkbox][0] = false;
}
this.setState({
[checkbox]: this.state[checkbox],
});
}
render() {
return (
<div className={s.root}>
<h2 className="page-title">
Clienti - <span className="fw-semi-bold"> Anagrafia</span>
</h2>
<Row>
<Col>
<Widget
settings
close
bodyClass={s.mainTableWidget}
>
<p></p>
<p></p>
<p></p>
<p></p>
<FormGroup >
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search text-white" />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input"
className="input-transparent"
placeholder="Ricerca"
type='text'
name='ricerca'
onChange={this.handleChange.bind(this)}
/>
</InputGroup>
</FormGroup>
<Table striped>
<thead>
<tr className="fs-sm">
<th className="hidden-sm-down">#</th>
<th>Cliente</th>
<th>Ragione Sociale</th>
<th className="hidden-sm-down">Indirizzo</th>
<th className="hidden-sm-down">Data Inserimento</th>
<th className="hidden-sm-down">CAP</th>
<th className="hidden-sm-down">Stato</th>
</tr>
</thead>
<tbody>
{this.state.tableStyles.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>
<img
className="img-rounded"
src={row.picture}
alt=""
height="50"
/>
</td>
<td>
{row.description}
{row.label && (
<div>
<Badge color={row.label.colorClass}>
{row.label.text}
</Badge>
</div>
)}
</td>
<td>
<p className="mb-0">
<small>
Città:
<span className="text-muted fw-semi-bold">
{row.info.type}
</span>
</small>
</p>
<p>
<small>
Provincia:
<span className="text-muted fw-semi-bold">
{row.info.dimensions}
</span>
</small>
</p>
</td>
<td className="text-muted">{this.parseDate(row.date)}</td>
<td className="text-muted">{row.size}</td>
<td className="width-150">
<Progress
color={row.progress.colorClass}
value={row.progress.percent}
className="progress-sm mb-xs"
/>
</td>
</tr>
))}
</tbody>
</Table>
<div className="clearfix">
<div className="float-right">
<Button color="default" className="mr-2" size="sm">
Refresh...
</Button>
<UncontrolledButtonDropdown>
<DropdownToggle
color="inverse"
className="mr-xs"
size="sm"
caret
>
Opzioni
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Clear</DropdownItem>
<DropdownItem>Move ...</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<p></p>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Static;
