1

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;
Ankita Jaiswal
  • 262
  • 4
  • 17

3 Answers3

1

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.

Sule Savas
  • 11
  • 1
  • import logo from './logo.svg'; import './App.css'; import CardExample from './ReviewCard' function App() { return (
    ); } export default App;     – Ankita Jaiswal Nov 17 '20 at 11:18
  • CardExample is the first example code in the link shared in https://mdbootstrap.com/docs/react/components/cards/ – Ankita Jaiswal Nov 17 '20 at 11:18
0

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

Shubham Verma
  • 4,918
  • 1
  • 9
  • 22
  • yeah...issue lies in version only. – Ankita Jaiswal Nov 18 '20 at 07:05
  • "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": "^16.14.0", "react-dom": "^16.14.0", "react-scripts": "3.4.3", "web-vitals": "^0.2.4" } this worked for me – Ankita Jaiswal Nov 18 '20 at 07:05
0

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

James
  • 371
  • 3
  • 12