Placeholder product in React.js

Question

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;

You are returning in the first iteration. You can't just use `return` like that in the loop. You have to create an array and push it into it. Usually `map` is used instead — Konrad, Dec 08 '22 at 21:16
Does this answer your question? [Return from a for loop but keep loop running](https://stackoverflow.com/questions/16565630/return-from-a-for-loop-but-keep-loop-running) — Konrad, Dec 08 '22 at 21:18

score 0 · Answer 1 · answered Dec 08 '22 at 21:30

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}
 ...
)

Thank You, im fix my code with your Help – syber man Dec 08 '22 at 23:47 — syber man, Dec 08 '22 at 23:47

score 0 · Answer 2 · edited Dec 13 '22 at 18:23

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;

Placeholder product in React.js

React.js PlaceHolder Product

2 Answers2