DEV Community

Jonathan Carrero
Jonathan Carrero

Posted on

Hook error using Truffle React box (transforming the App.js from Class component to Functional component)

Hello! Not an expert Solidity/React user here. I got Truffle React box and I am making a website. My example is very easy. I have this Nav element:

https://codeshare.io/xvgqBL

Which is defined here:

https://codeshare.io/6pmYZg

Simple. Now, due to some hook errors in React, I decided to convert my App.js file. When you download this box, the App is a Class component. It means you cannot use hook inside it (as far as I know). So my next step was transform that Class component into a Functional component (some users from the React community helped me in this task). The result was:

https://codeshare.io/nzPkBM

The code was reviewed and seems to be fine. I cannot find any errors in it either. But it is again throwing a hook error, but some users think this could be a red herring because as far as I know I am not using any hook. If I remove tag at the end of the App.js file, the app works perfectly.

The error when I run npm run start: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7g5qkn3ouhcqs6qw885.png

I can provide a sandbox with my project if it's necessary. Please, this is driving me crazy.

Additionally, I checked my version:

  • npm view react version: 17.0.2
  • npm view react-native version: 0.65.1

But, in my json file it seems I have another version:

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "dotenv": "^10.0.0",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-scripts": "3.2.0",
    "truffle-hdwallet-provider": "^1.0.17",
    "web3": "1.2.2"
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
joncarre profile image
Jonathan Carrero Author

I've updated my question with my version of React.