I extended the coin-exchange app by adding dialogs utilizing bootstrap. On some of the dialogs I get an error in the console. The links describe fixing your refs to resolve the error, but the dialogs don’t use any refs.
I’d like to understand how to diagnose the issue. I’ve tried commenting out code until the error goes away, but the only way I can stop the error is to completely remove the empty LoadingDialog. (Loading dialog presents a window to show the status of the app loading the coins from coinpaprika and loading the list of coins purchased)
What steps should I use to diagnose the issue?
The deployed app is here: https://warniaha.github.io/coin-exchange/
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Transition (http://localhost:3000/coin-exchange/static/js/vendors~main.chunk.js:50924:30)
at http://localhost:3000/coin-exchange/static/js/vendors~main.chunk.js:13006:24
at BackdropTransition
at http://localhost:3000/coin-exchange/static/js/vendors~main.chunk.js:48708:24
at http://localhost:3000/coin-exchange/static/js/vendors~main.chunk.js:14452:23
at LoadingDialog (http://localhost:3000/coin-exchange/static/js/main.chunk.js:3497:78)
at div
at App (http://localhost:3000/coin-exchange/static/js/main.chunk.js:269:91)
LoadingDialog.jsx:
import React from 'react'
import { Modal, Button, Table } from 'react-bootstrap';
export default function LoadingDialog(props) {
const loadingMessage = (status) => {
return status ? "Completed" : "Loading...";
}
const balancesStatus = () => {
const status = Boolean(props.coinBalance);
return <div>
{loadingMessage(status)}
</div>
}
const settingsStatus = () => {
const status = props.settings.feeRate !== undefined;
return <div>
{loadingMessage(status)}
</div>
}
const tickersStatus = () => {
const status = Boolean(props.coinTicker);
return <div>
{loadingMessage(status)}
</div>
}
const [seconds, setSeconds] = React.useState(0);
const [reloadSeconds, setReloadSeconds] = React.useState(5);
const handleReload = () => {
props.handleReload();
setReloadSeconds(seconds + 5);
}
const enableReloadButton = seconds >= reloadSeconds;
React.useEffect(() => {
if (props.show) {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
if (Boolean(props.coinBalance) &&
Boolean(props.coinTicker) &&
props.settings.feeRate !== undefined) {
props.handleClose();
setSeconds(0);
}}, 1000);
return () => clearInterval(interval);
}
}, [props]);
return (
<Modal
show={props.show}
onHide={props.handleClose}
>
<Modal.Header>
<Modal.Title>{props.modalTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table className="table table-primary table-borders">
<tbody>
<tr>
<th>Balances</th>
<td>
<div>
{balancesStatus()}
</div>
</td>
</tr>
<tr>
<th>Tickers</th>
<td>
<div>
{tickersStatus()}
</div>
</td>
</tr>
<tr>
<th>Settings</th>
<td>
<div>
{settingsStatus()}
</div>
</td>
</tr>
</tbody>
</Table>
<p>{seconds} seconds have elapsed.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="primary"
disabled={!enableReloadButton}
onClick={handleReload}>
Attempt to reload
</Button>
</Modal.Footer>
</Modal>
);
}
LoadingDialog as used from App.jsx:
return (
<div className="App">
REMOVED UNIMPORTANT CODE
<LoadingDialog show={isLoadingDialogOpen === LoadingState.Displayed}
coinBalance={coinBalance}
coinTicker={coinTicker}
settings={{feeRate: feeRate}}
modalTitle="Loading values"
handleReload={onReloadLoadingDialog}
handleClose={closeLoadingDialog}/>
REMOVED UNIMPORTANT CODE
</div>
);
}
