Loop an Array JS

#javascript #react #programming #beginners

	function Loading({ item = 4 }) {
	let skeleton = [];
	for (let i = 0; i < item; i++) {
	skeleton.push(
	<div key={`skeleton-just-arrived-${i}`} className="px-4 relative card group">
	<div className="rounded-xl overflow-hidden card-shadow relative bg-gray-300"
	style={{ width: "287px", height: "386px" }} >
	</div>
	<div className="w-8/12 h-3 absolute bottom-16 left-10 bg-gray-400 mt-3 rounded-full"></div>
	<div className="w-6/12 h-3 absolute bottom-10 left-10 bg-gray-400 mt-3 rounded-full"></div>
	</div>
	)
	}
	return skeleton
	}

view raw for-react-js.jsx hosted with ❤ by GitHub

Top comments (2)

Andrew Bone • Nov 23 '21

You could make this a bit simpler by using new Array which lets you just say how long you want an array to be.

function Loading({ item = 4 }) {
  return [...new Array(item)].map((_, i) => (
    <div key={`skeleton-just-arrived-${i}`} className="px-4 relative card group">
      <div className="rounded-xl overflow-hidden card-shadow relative bg-gray-300" style={{ width: "287px", height: "386px" }}  />
      <div className="w-8/12 h-3 absolute bottom-16 left-10 bg-gray-400 mt-3 rounded-full" />
      <div className="w-6/12 h-3 absolute bottom-10 left-10 bg-gray-400 mt-3 rounded-full" />
    </div>
  ));
}