I have a code here that I want to update inside this hook when an element outside useEffect is updated.
const handleSelectHost = (selectedHosts) => {
if (selectedHosts.length >= 1) {
setMultiDeleteHost(true);
} else {
setMultiDeleteHost(false);
}
const updatedMultiHostName = updateObject(multiHostName, {
selectValue: selectedHosts,
});
setMultiHostName(updatedMultiHostName);
};
useEffect(() => {
let isUnmount = false;
let selectedHosts = [];
if (props.hosts) {
console.log(deleteRef);
const rows = props.hosts.map((row, key) => {
const initiatorNames = []
const initiatorTarget = []
const initiatorConnected = []
const initiatorDisconnected = []
for (let initiator of row.initiators) {
initiatorNames.push(initiator.name)
initiatorTarget.push(initiator.target)
}
row.initiators.filter(
(initiator) => {
if (initiator["Connection Status"] === "Connected") {
initiatorConnected.push(initiator)
} else initiatorDisconnected.push(initiator)
}
);
return {
name: row.name,
ip: <div style={{ width: 100 }}>{row.ip}</div>,
initiators: <div>{[...new Set(initiatorNames)].map((item, index) => { return <span key={index} className="target px-2">{item}</span> })}</div>,
connection_Status: `${initiatorConnected.length} Connected, ${initiatorDisconnected.length} Disconnected`,
access_control: row.acc,
type: row.type,
actions: [
<div key={row.name} className="d-flex align-items-center">
<MDBBtn
onClick={(e) => handleShowDetail(row)}
size="sm"
outline
color=""
className="primary-color"
>
Detail
</MDBBtn>
<MDBDropdown key={key} dropright className="text-center">
<MDBDropdownToggle
color=""
className="z-depth-0 hoverable py-1 px-2 my-0"
>
<MDBIcon icon="fas fa-ellipsis-v dynamic-text-color" />
</MDBDropdownToggle>
<MDBDropdownMenu color="" basic>
<MDBDropdownItem onClick={() => handleHostEdit(row)}>
Edit Host
</MDBDropdownItem>
<MDBDropdownItem
disabled={multiDeleteHost ? true : false}
//How can I get and change the value of the state when my status changes in the table that is an option?
onClick={() => handleDeleteHost(row.name)}
>
Delete Host
</MDBDropdownItem>
<MDBDropdownItem
hidden={row.ip ? false : true}
onClick={() => handleDeleteIp(row.ip, row.name)}
>
Delete Ip
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</div>,
],
};
});
const updateDataTable = updateObject(dataTable, {
rows: rows,
options: updateObject(dataTable.options, {
onRowSelectionChange: (
currentRowsSelected,
allRowsSelected,
rowsSelected
) => {
selectedHosts.length = 0;
for (let index of rowsSelected) {
props.hosts[index] && selectedHosts.push(props.hosts[index].name);
}
handleSelectHost(selectedHosts);
fetchRef()
},
textLabels: {
body: {
noMatch: !rows.length ? "Sorry, no matching records found" : "",
},
},
}),
});
if (!isUnmount) {
setDataTable(updateDataTable);
}
}
return () => {
isUnmount = true;
selectedHosts = [];
setMultiDeleteHost(false);
setMultiHostName({ selectValue: [] });
};
}, [props.hosts]);
I want the check box of the line to be selected and the delete host option to be disabled in drop, but because it is inside the use effect, it is not possible
