CODEWITHSUNDEEP
reactjsmaterial-designmdbreact
Ankita Jaiswal
Ankita Jaiswal

Reputation: 262

Material Design Bootstrap (MDBReact) is not working

enter image description here

Getting following error on using mdbreact components,

←→1 of 2 errors on the page Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
 "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "mdbreact": "^4.27.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },

I have added following index.js

   import '@fortawesome/fontawesome-free/css/all.min.css'; 
    import 'bootstrap-css-only/css/bootstrap.min.css';
    import 'mdbreact/dist/css/mdb.css';

App.js

import logo from './logo.svg';
import './App.css';
import CardExample from './ReviewCard'
function App() {
  return (
    <div className="App">
      <CardExample />
    </div>
  );
}

export default App;

ReviewCard.js

import React from 'react';
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardTitle, MDBCardText, MDBCol } from 'mdbreact';

const CardExample = () => {
  return (
    <MDBCol>
      <MDBCard style={{ width: "22rem" }}>
        <MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
        <MDBCardBody>
          <MDBCardTitle>Card title</MDBCardTitle>
          <MDBCardText>
            Some quick example text to build on the card title and make
            up the bulk of the card&apos;s content.
          </MDBCardText>
          <MDBBtn href="#">MDBBtn</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>
  )
}

export default CardExample;

Upvotes: 1

Views: 11453

Answers (3)

James
James

Reputation: 451

You have to install latest mdb npm package using command npm i mdb-react-ui-kit. It will work with React 17. You don't need to downgrade your react version

add below line in index.js import 'mdb-react-ui-kit/dist/css/mdb.min.css'

add below line in index.html for fontawesome

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 5054

Looks like they are not migrated to latest react ^17. Try reducing react version to 16.*. It works like charm.

Here is package.json that I used:

"dependencies": {
    "mdbreact": "4.27.0",
    "react": "16.14.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },

Here is the demo you can check

Upvotes: 0

Sule Savas
Sule Savas

Reputation: 11

I don't think because of MDBReact. Maybe you can move the Hooks into main default function.

Also if you can share your code, we can help easier.

Upvotes: 1

Related Questions