CODEWITHSUNDEEP
reactjsrenderingreact-bootstrap
JanKoci
JanKoci

Reputation: 59

Error: Element type is invalid: expected a string (for built-in components) or a class/function et cetera

I am trying to build kind of a react application, but I am getting the error mentioned in the title. I am a beginner, when it comes to react and I am following a tutorial, where the following code is. Solving this problem would be a great lesson for me. enter image description here

Product.js -

import React from "react";
import { Card } from "react-bootstrap";
 
function Product({ product }) {
  return (
    <Card className="my-3 p-3 rounded">
      <a href={`/product/${product._id}`}>
        <Card.Img src={product.image} />
      </a>
 
      <Card.body>
        <a href={`/product/${product._id}`}>
          <Card.Title as="div">
            <strong>{product.name}</strong>
          </Card.Title>
        </a>
        <Card.Text as="div">
          <div className="my-3">
            {product.rating} from {product.numReviews} reviews
          </div>
        </Card.Text>
 
        <Card.Text as="h3">${product.price}</Card.Text>
      </Card.body>
    </Card>
  );
}

export default Product;

HomeScreen.js -

import React from "react";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
 
import products from "../products";
 
function HomeScreen() {
  return (
    <div>
      <h1>Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}
 
export default HomeScreen;

App.js -

import { Container } from "react-bootstrap";
 
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
 
function App() {
  return (
    <div>
      <Header />
      <main className="py-3">
        <Container>
          <HomeScreen />
        </Container>
      </main>
      <Footer />
    </div>
  );
}
 
export default App;

index.js -

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Can anybody help me please? Thank You very much in advance.

Upvotes: 0

Views: 426

Answers (1)

albert
albert

Reputation: 474

It could be because of a typo you made on one of the card component.

Looking at the source code https://github.com/react-bootstrap/react-bootstrap/blob/v1.4.0/src/Card.tsx#L146

you should be using

<Card.Body>

instead of

<Card.body>

Full list here https://github.com/react-bootstrap/react-bootstrap/blob/v1.4.0/src/Card.tsx#L143-L151

Upvotes: 2

Related Questions