Uncaught DOMException: Failed to execute ‘createElement’ on ‘Document’: The tag name provided

i had created card component and i called in my ProductPage.js after that i am getting error like Uncaught DOMException: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘/static/media/Card.c3b0a67ff849f2bda062.JS’) is not a valid name. initially it was div and i change to card after that i am getting above error if changed div then it is working fine how can i solve this issue. For ref Please find the attached image.

and code is like this.

ProductPage.js

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getProductPage } from "../redux/actions";
import { useLocation } from "react-router-dom";
import getParams from "../utils/getParams";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
import Card from "../Components/Card.JS";

function ProductPage() {
  const dispatch = useDispatch();
  const product = useSelector((state) => state.product);
  const { page } = product;
  const { search } = useLocation();

  useEffect(() => {
    const params = getParams(search);
    console.log(params);
    const payload = {
      params,
    };
    dispatch(getProductPage(payload));
  }, []);
  return (
    <div style={{ margin: "0 10px" }}>
      {page.title}
      <Carousel renderThumbs={() => {}}>
        {page.banners &&
          page.banners.map((banner, index) => (
            <a
              key={index}
              style={{ display: "block" }}
              href={banner.navigateTo}
            >
              <img src={banner.img} alt="" />
            </a>
          ))}
      </Carousel>
      <div>
        {page.products &&
          page.products.map((product, index) => (
            <Card key={index}>
              <img src={product.img} alt="" />
            </Card>
          ))}
      </div>
    </div>
  );
}

export default ProductPage;

Card.js

import React from "react";
import "./style.css";

function Card(props) {
  return <div className="card">{props.card}</div>;
}

export default Card;

Answer

you are using the img tag inside the card so you need to render the children not the props.card.

import React from "react";
import "./style.css";

function Card(props) {
  return <div className="card">{props.children}</div>;
}

export default Card;