gregnb / gregnb/mui-datatables

MUIDataTable onRowSelectionChange does not work with setState

Open
#1,973 1 comment 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

Im trying to update the state of an object with my selected rows, but it does not work with MUIDataTable. The object is updated and set, but the rows are not marked as selected.

```
import React, {useState, useEffect, useCallback} from 'react';
import { useSelector } from "react-redux";
import { MuiThemeProvider } from '@material-ui/core/styles';
import MUIDataTable from "mui-datatables";
import NumberFormat from 'react-number-format';
import moment from 'moment';
import { Button } from 'reactstrap';
import NotificationManager from 'react-notifications/lib/NotificationManager';
import Modal from 'react-modal';
import { FormControlLabel, Checkbox } from '@material-ui/core';

import Main from '../Main';
import RctCollapsibleCard from '../Helpers/RctCollapsibleCard/RctCollapsibleCard';
import LinearProgress from '../Util/LinearProgress';
import * as Constants from '../Util/constants';
import * as unitsAPI from '../../Api/units';

const modalStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-8%',
transform: 'translate(-50%, -50%)',
height: 'au'
},
};

const tdStyle = {
maxWidth: '100%',
}

const PostVacancies = () => {
const login = useSelector((state) => state.login);
const propertyID = login.selectedPropertyID;

const [loading, setLoading] = useState(false);
const [units, setUnits] = useState([]);
const [onlyVacant, setOnlyVacant] = useState(true);
const [unitsToPost, setUnitsToPost] = useState([]);
const [openModal, setOpenModal] = useState(false);

useEffect(() => {
async function fetchData() {
setLoading(true);
// get units from the database
const units = await unitsAPI.getPostVacanciesUnits(propertyID);
setUnits(units);
setLoading(false);
}
fetchData();
}, [propertyID])

const showUnits = useCallback(() => {
const arr = [];
const occupied = onlyVacant ? 0 : 1;
for(const u of units) {
if(occupied === parseInt(u.Occupied)) {
const today = moment.utc();
const vacant = moment.utc(u.VacantDate);
const daysOnMarket = today.diff(vacant, 'days');
const loss = parseFloat(u.UnitCharge) * (daysOnMarket * 12 / 365);
arr.push({
unit: u.UnitName,
unitType: u.UnitType,
moveOutDate: moment.utc(u.VacantDate).format("MM/DD/YYYY"),
daysOnMarket,
marketRent: parseFloat(u.UnitCharge).toFixed(2),
lossToVacancy: parseFloat(loss).toFixed(2),
unitID: u.UnitID,
});
}
}
return arr;
}, [units, onlyVacant])

const columns = [
{ name: 'unit', label: 'Unit', },
{ name: 'unitType', label: 'Unit Type', },
{ name: 'moveOutDate', label: 'Move Out Date', },
{ name: 'daysOnMarket', label: 'Days on Market', },
{ name: 'marketRent', label: 'Market Rent',
options: {
customBodyRender: (value) => {
return
}
},
},
{ name: 'lossToVacancy', label: 'Loss to Vacancy',
options: {
customBodyRender: (value) => {
return
}
},
},
];

const options = {
filterType: 'dropdown',
pagination: false,
onRowSelectionChange: (_, allSelected) => {
setUnitsToPost([...allSelected]);
},
}

const handlePostVacancies = () => {
if(unitsToPost.length === 0) {
NotificationManager.warning("Please, select at least one unit", "Error")
return;
}
setOpenModal(true);
}

const renderTitle = () => {
return (
<>
setOnlyVacant(!onlyVacant)}>
{onlyVacant ? 'Show all untis' : 'Show only vacant untis'}

{' '}

Post


)
}

const postUnits = async () => {
setLoading(true);
const res = await unitsAPI.postVacancies({
propertyID,
autoPostVacancies: automaticPostVacant ? 1 : 0,
autoRemoveNonVacancies: automaticRemoveNonVacant ? 1 : 0,
unitsUpdated: unitsToPost.length,
unitsToPost,
});
setLoading(false);
if(res !== 0) {
NotificationManager.errors(Constants.DEFAULT_ERROR, "Error");
return;
}
NotificationManager.success("Your units have been submitted to the various websites. Actual posting times are dependent upon the individual sites.", "Success");
}

const renderModalContent = () => {
return (


This is a test

)
}

if(loading) {
return (



);
}

return (
<>
setOpenModal(false)}
contentLabel="Units selected"
style={modalStyles}
>
{renderModalContent()}






Post Vacancies














)
}

export default PostVacancies;
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.