react load more listview
import { useState, useEffect, useCallback } from 'react'
export const LoadMoreItem = (props) => {
const [increment, setIncrement] = useState(4)
const [disabled, setDisabled] = useState(false)
const [hidden, setHidden] = useState(false)
useEffect(() => {
if (increment >= props.items.length) setHidden(true)
}, [increment])
const onLoadMore = useCallback(() => {
setDisabled(true)
setTimeout(() => {
setDisabled(false)
setIncrement(() => increment + 4)
}, 3000)
}, [increment, disabled])
return (
<>
<div className='container'>
<div className='row'>
<div
style={{
height: '530px',
overflowY: 'auto',
background: 'lightgrey',
border: '3px solid black',
bordeRadius: '10%',
marginTop: '3vh',
opacity: disabled == false ? 1 : 0.5,
cursor: disabled == false ? 'default' : 'not-allowed'
}}>
{props.items !== undefined &&
props.items.slice(0, increment).map((val, index) => (
<ul
style={{
listStyle: 'none',
display: 'block',
background: 'lightgreen',
color: 'black',
padding: 8,
margin: 10,
border: '3px solid black',
bordeRadius: '10%'
}}
key={index}>
<li>{val.name}</li>
<li>{val.rating}</li>
<li>{val.avatar}</li>
<li>{val.comment} </li>
</ul>
))}
</div>
{disabled !== true && (
<button
className='btn btn-dark mt-2'
onClick={onLoadMore}
disabled={hidden !== false ? hidden : disabled}
style={{ display: hidden == false ? 'block' : 'none' }}>
<span className='py-2'> Load more...</span>
</button>
)}
{disabled !== false && (
<button
className='btn btn-dark mt-2'
onClick={onLoadMore}
disabled={disabled}
style={{ display: hidden == false ? 'block' : 'none' }}>
<span className='spinner-grow spinner-grow-sm text-light py-2' />
</button>
)}
</div>
</div>
</>
)
}
export default LoadMoreItem