onScroll when at the bottom of the div then disable button - reactjs

Question

Trying to achieve something similar to popular T&C's actions, when you scroll down to the very bottom of the div 'accept' button becomes enabled so you can click on it.
For this example, I am using material-UI components & button becomes disabled when I add 'disabled' within the component, that's all.
Here's the code:
import React from 'react';
import PropTypes from 'prop-types';
import Modal from '#material-ui/core/Modal';
import Button from '#material-ui/core/Button';
import './terms-popup.scss';
const handleScroll = (e) => {
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
if (bottom) { console.log('bottom is reached'); }
};
const TermsPopup= ({
isModalOpen,
isOpen,
title,
closeLabel,
showCloseButton,
}) => {
return (
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={isOpen}
onClose={() => isModalOpen(false)}
>
<div className="terms-container">
<div className="terms-header">
<h2>{title}</h2>
</div>
<div
className="terms-body"
onScroll={handleScroll}
>
<h3>Sample title</h3>
<p>Sample description would go here</p>
<div className="terms-footer">
{(showCloseButton) ? (
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
>
{closeLabel}
</Button>
) : null}
</div>
</div>
</Modal>
);
};
TermsPopup.propTypes = {
isModalOpen: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
closeLabel: PropTypes.string,
showCloseButton: PropTypes.bool,
};
TermsPopup.defaultProps = {
closeLabel: 'accept',
showCloseButton: true,
};
export default TermsPopup;
And what I'd like to achieve is when the bottom is reached then Button should change to:
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled
/>

Answer 1

Move your onScroll event handler into the component itself, and use React state to update your component when the bottom is reached. You can use the state variable to then set the 'disabled' prop on your Button component.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Modal from '#material-ui/core/Modal';
import Button from '#material-ui/core/Button';
import './terms-popup.scss';
const TermsPopup= ({
isModalOpen,
isOpen,
title,
closeLabel,
showCloseButton,
}) => {
const [bottom, setBottom] = useState(false);
const handleScroll = (e) => {
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
setBottom(bottom)
};
return (
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={isOpen}
onClose={() => isModalOpen(false)}
>
<div className="terms-container">
<div className="terms-header">
<h2>{title}</h2>
</div>
<div
className="terms-body"
onScroll={handleScroll}
>
<h3>Sample title</h3>
<p>Sample description would go here</p>
<div className="terms-footer">
{(showCloseButton) ? (
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled={bottom}
>
{closeLabel}
</Button>
) : null}
</div>
</div>
</Modal>
);
};