Function ListDisplay

src/components/ListDisplay/index.js:6–119

(props)

import OptionsRow from './OptionsRow';

function ListDisplay(props) {
	let listItems = props.children;
	const [display, setDisplay] = useState([]);

	useEffect(() => {
		if (listItems) {
			setDisplay(listItems.slice(0, 15));
		}
	}, [listItems]);

	const observer = useRef();
	const lastElementRef = useCallback(
		(node) => {
			if (!display) return;
			if (observer.current) observer.current.disconnect();
			observer.current = new IntersectionObserver((entries) => {
				if (entries[0].isIntersecting) {
					if (display.length + 15 < listItems.length) {
						setDisplay(
							display.concat(
								listItems.slice(
									display.length,
									display.length + 15,
								),
							),
						);
					} else {
						setDisplay(listItems);
					}
				}
			});
			if (node) observer.current.observe(node);
		},
		[display, listItems],
	);

	const header = (categoryTitle) => (
		<div className='w-full flex'>
			<div
				className='mx-auto mb-4 mt-6 p-4 rounded-lg shadow-lg 
                bg-gray-700 sm:text-xl lg:text-2xl xl:text-3xl text-gray-100
                flex-none'
			>
				{categoryTitle}
			</div>
		</div>
	);

	const output = () => {
		if (props.isCategory) {
			listItems.sort((a, b) =>
				a['Category'].localeCompare(b['Category']),
			);
		}

		let previous = null;

		return (