Card component is not rendering anything. React bootstrap

Question

I am using card from bootstrap react but it is not rendering anything on the screen, below is my code. Currently it is displaying it but not as intended, I have tried modifying it but it stops working.

I appreciate any help.

function Products(props) {
  let params = useParams()
  let [ product, setProduct ] = useState()
  function loading() {
    return <div className="w-25 text-center"><Spinner animation="border" /></div>
    }
  function Products(products) {
    if (products === null) return;
    return products.map((product) => (
      <ListGroup.Item key={product.Id}>
        <Link to={`/products/${product.name}`} key={product.id}> {product.name}
        </Link>
      </ListGroup.Item>
    ));
  }

  let { id, name, description, price, origin, imgUrl } = product;
  return (
    <>
      <h1>Products</h1>
      <Card className="align-self-start w-25">
      <Card.Body>
      <Card.Title>{origin}</Card.Title>
      <Card.Text>
      <strong>Description:</strong> <span>{description}</span>
          <br/>
          <ProductContext.Consumer>
            {({ products }) => Products(products)}
          </ProductContext.Consumer>
          </Card.Text>
        </Card.Body>
      </Card>
    </>
  );
  if (product === undefined) return loading()
  return product.id !== parseInt(params.productId) ?  loading() : Products()

}

export default Products;

score 1 · Answer 1 · answered Jul 26 '22 at 09:01

I'm not sure if this is related to your problem, but it seems that if the product is undefined, you do not display the loading() part. This code is unreachable because it is after the return statement of your component function.

function Products(props) {
  let params = useParams();
  let [product, setProduct] = useState();
  function loading() {
    return (
      <div className='w-25 text-center'>
        <Spinner animation='border' />
      </div>
    );
  }

  if (product === undefined) return loading();

  let { id, name, description, price, origin, imgUrl } = product;
  return (
    <>
      <h1>Products</h1>
      <Card className='align-self-start w-25'>
        <Card.Body>
          <Card.Title>{origin}</Card.Title>
          <Card.Text>
            <strong>Description:</strong> <span>{description}</span>
          </Card.Text>
        </Card.Body>
      </Card>
    </>
  );
}

export default Products;

Also, it seems that you have name that might conflicts: Try to avoid having a function Products() inside a function that is already called Products. My recommendation for this scenario is to create 2 different components and split their code into 2 different files ;-)

Thanks for your reply!! I will try the 2 components – Aquiles Bailo Jul 27 '22 at 02:14 — Aquiles Bailo, Jul 27 '22 at 02:14

score 1 · Accepted Answer · answered Jul 26 '22 at 09:20

I feel like the logic in your code isn't sound. First of all, useState's product doesn't seem to be used OR set (at least in this code snippet). The products is coming from the ProductContext.Consumer, which we don't know the code for.

A couple things about your code to fix/look into:

use const with useState
You aren't using your useState getter or setter in this code snippet.
Make sure no locally declared names conflict with imports or other declarations(either rename imports like import BootstrapComponent as BSComponent from "bootstrap" or pick a unique name for your component). You have two Products nested. Whether the scope is sound, name them more purposefully like Products and ProductsWrapper or something.
as Xavier said, you have unreachable code

My guess, is either you have naming conflicts or the Consumer isn't working as expected. Gotta fix your logic and perhaps move the inner Products function out to simplify things for you.

Thank you so much for your reply, I have a product context, the whole program works as intended, display products, save and render but I want them rendered differently and I've been trying to use Card component but it does not work. — Aquiles Bailo, Jul 27 '22 at 02:16
Can you explain a little more what you mean. Not sure what you mean by wanting them "rendered differently". And you say things render but the Card component "doesn't work". Are styles broken? If so, see [here](https://stackoverflow.com/a/44985246/13699142) for some info on Bootstrap. — KaWaite, Jul 27 '22 at 02:53

Card component is not rendering anything. React bootstrap

2 Answers2