React.js PlaceHolder Product

im want to add pre-load like skeleton loader in my react app for example add 10 or 20 placeHolder but want without array.map or forEach because im need this placeholder in zero length response time if im using forEach dont working if you can Help me to fix this, thank you. demo placeHolder

and im try for loop in funtion but not working my code

function placeHolders(){
    for (let i = 1; i <=20; i  ){
        return(
          <Card style={{ width: "18rem" }} key={i}>
              <Card.Img
                variant="top"
                src="https://kubalubra.is/wp-content/uploads/2017/11/default-thumbnail.jpg"
              />
              <Card.Body>
                <Placeholder as={Card.Title} animation="glow">
                  <Placeholder xs={6} />
                </Placeholder>
                <Placeholder as={Card.Text} animation="glow">
                  <Placeholder xs={7} /> <Placeholder xs={4} />{" "}
                  <Placeholder xs={4} /> <Placeholder xs={6} />{" "}
                  <Placeholder xs={8} />
                </Placeholder>
                <Placeholder.Button variant="primary" xs={6} />
              </Card.Body>
            </Card>
        )
      
    }
  }
  return (
    <div className="row row-cols-1 row-cols-md-4 g-4">
      {products.length <= 0 &&
      placeHolders()
      }
      {renderList}
    </div>
  );
}

export default ProductComponents;

CodePudding user response：

There are few ways of doing it. For convenience, lets put your card into separate component named Placeholder

const Placeholder = () => (
           <Card style={{ width: "18rem" }} key={i}>
              <Card.Img
                variant="top"
                src="https://kubalubra.is/wp-content/uploads/2017/11/default-thumbnail.jpg"
              />
              <Card.Body>
                <Placeholder as={Card.Title} animation="glow">
                  <Placeholder xs={6} />
                </Placeholder>
                <Placeholder as={Card.Text} animation="glow">
                  <Placeholder xs={7} /> <Placeholder xs={4} />{" "}
                  <Placeholder xs={4} /> <Placeholder xs={6} />{" "}
                  <Placeholder xs={8} />
                </Placeholder>
                <Placeholder.Button variant="primary" xs={6} />
              </Card.Body>
            </Card>
    )

Now you have few options. Render it using map inside of your component return

return (
   ...
   {!products.length && (
      {Array(20).fill().map(() => <Placeholder />)}
   ) : (
      {renderList}
   )}
   ...
)

Or you can pre-create that placeholders and use when you need like:

const placeholders = Array(20).fill().map(() => <Placeholder />)
...

return (
 ...
 {placeholders}
 ...
)

CodePudding user response：

  const Placeholders = () => (
    <Card style={{ width: "18rem" }}>
       <Card.Img
         variant="top"
         src="https://kubalubra.is/wp-content/uploads/2017/11/default-thumbnail.jpg"
       />
       <Card.Body>
         <Placeholder as={Card.Title} animation="glow">
           <Placeholder xs={6} />
         </Placeholder>
         <Placeholder as={Card.Text} animation="glow">
           <Placeholder xs={7} /> <Placeholder xs={4} />{" "}
           <Placeholder xs={4} /> <Placeholder xs={6} />{" "}
           <Placeholder xs={8} />
         </Placeholder>
         <Placeholder.Button variant="primary" xs={6} />
       </Card.Body>
     </Card>
)
const Ar = Array(20).fill()
  return (
    <div className="row row-cols-1 row-cols-md-4 g-4">
      {!products.length &&
      Ar.map((item, index) => {return(
        <Placeholders key={index}/>
      )})
      }
      {renderList}
    </div>
  );
}

export default ProductComponents;```