I’ve just started working with react-table and I can’t figure out how to use use Memo when loading a page yet. How do I push data(from api) into const data when loading a page.
import React, { useEffect, useState, useMemo } from "react";
import "../../custom.css";
import {COLUMNS} from './columns';
import { useTable } from "react-table";
import { ButtonGroup } from "../ButtonMenu";
import ChildInput from "../ChildInput/ChildInput";
import ChildModal from "../ChildModal/ChildModal";
export default function ChildTableNew() {
const [childrens, setChildrens] = useState([]);
const [selectedRow, setSelectedRow] = useState(-1);
const [loading, setLoading] = useState(true);
const [createModal, setCreateModal] = useState(false);
const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => childrens, [childrens])
const [name, setName] = useState("");
useEffect(() => {
Get();
console.log(data);
}, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow
} = useTable({
columns,
data
})
return (
loading?
<p>
<em>Loading...</em>
</p> :
<div>
<ChildModal visible={createModal} setVisible={setCreateModal}>
<form>
<ChildInput
value={name}
onChange={e => setName(e.target.value)}
type="text"
placeholder="Имя"/>
<ChildInput type="text" placeholder="Фамилия" />
<ChildInput type="text" placeholder="Отчество" />
<ChildInput type="date" placeholder="Дата рождения" />
<select className=".sex" >
<option disabled> Пол </option>
<option value="мальчик"> мальчик </option>
<option value="девочка"> девочка </option>
</select>
<ChildInput type="text" placeholder="Полис" />
<ChildInput type="text" placeholder="Адрес" />
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-add" onClick={Add}>
Создать
</button>
<button type="button" class="btn btn-delete" onClick={() => setCreateModal(false)}>
Закрыть
</button>
</div>
</form>
</ChildModal>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-add" onClick={() => setCreateModal(true)}>
Add
</button>
<button type="button" class="btn btn-update">
Update
</button>
<button type="button" class="btn btn-delete" onClick={Delete}>
Delete
</button>
</div>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
<tfoot>
{footerGroups.map(footerGroup => (
<tr {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map(column => (
<td {...column.getFooterProps()}>{column.render('Footer')}</td>
))}
</tr>
))}
</tfoot>
</table>
</div>
);
async function Add(e){
e.preventDefault()
console.log(name)
setCreateModal(false)
}
async function Delete(){
}
async function Get() {
const response = await fetch("api/Children");
const data = await response.json();
setChildrens(data);
setLoading(false);
}
}
Now I’m using useEffect to get data for a table from the api (I have a working regular table, but I want to move it to react-table).