react load more listview

1import { useState, useEffect, useCallback } from 'react'
2
3export const LoadMoreItem = (props) => {
4	const [increment, setIncrement] = useState(4)
5	const [disabled, setDisabled] = useState(false)
6	const [hidden, setHidden] = useState(false)
7
8	useEffect(() => {
9		if (increment >= props.items.length) setHidden(true)
10	}, [increment])
11
12	const onLoadMore = useCallback(() => {
13		setDisabled(true)
14		setTimeout(() => {
15			setDisabled(false)
16			setIncrement(() => increment + 4)
17		}, 3000)
18	}, [increment, disabled])
19
20	return (
21		<>
22			<div className='container'>
23				<div className='row'>
24					<div
25						style={{
26							height: '530px',
27							overflowY: 'auto',
28							background: 'lightgrey',
29							border: '3px solid black',
30							bordeRadius: '10%',
31							marginTop: '3vh',
32							opacity: disabled == false ? 1 : 0.5,
33							cursor: disabled == false ? 'default' : 'not-allowed'
34						}}>
35						{props.items !== undefined &&
36							props.items.slice(0, increment).map((val, index) => (
37								<ul
38									style={{
39										listStyle: 'none',
40										display: 'block',
41										background: 'lightgreen',
42										color: 'black',
43										padding: 8,
44										margin: 10,
45										border: '3px solid black',
46										bordeRadius: '10%'
47									}}
48									key={index}>
49									<li>{val.name}</li>
50									<li>{val.rating}</li>
51									<li>{val.avatar}</li>
52									<li>{val.comment} </li>
53								</ul>
54							))}
55					</div>
56					{disabled !== true && (
57						<button
58							className='btn btn-dark mt-2'
59							onClick={onLoadMore}
60							disabled={hidden !== false ? hidden : disabled}
61							style={{ display: hidden == false ? 'block' : 'none' }}>
62							<span className='py-2'> Load more...</span>
63						</button>
64					)}
65					{disabled !== false && (
66						<button
67							className='btn btn-dark mt-2'
68							onClick={onLoadMore}
69							disabled={disabled}
70							style={{ display: hidden == false ? 'block' : 'none' }}>
71							<span className='spinner-grow spinner-grow-sm text-light py-2' />
72						</button>
73					)}
74				</div>
75			</div>
76		</>
77	)
78}
79
80export default LoadMoreItem