close

[Solved] Invalid hook call. Hooks can only be called inside of the body of a function component

Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to run my react project but I am facing following error Invalid hook call. Hooks can only be called inside of the body of a function component in ReactJs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How This Error Occurs ?

I am trying to run my react project but I am facing following 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.

How To Solve Invalid hook call. Hooks can only be called inside of the body of a function component Error ?

  1. How To Solve Invalid hook call. Hooks can only be called inside of the body of a function component Error ?

    To Solve Invalid hook call. Hooks can only be called inside of the body of a function component Error If You are using local_library Then You must have to link it in order to use Local Library. Just use npm link <Your_Library_path> command. Just like this: npm link <path_to_local_library>/node_modules/local_library and Now, Your error must be solved.

  2. Invalid hook call. Hooks can only be called inside of the body of a function component

    To Solve Invalid hook call. Hooks can only be called inside of the body of a function component Error You Just need to convert Your Class as Your functional component and Your error will be solved. Im my Example I have to Convert my Users Class to functional component and My its is working fine. Now, Your error will be solved hopefully!.

Solution 1: Convert Your Class To Component

You Just need to convert Your Class as Your functional component and Your error will be solved. Im my Example I have to Convert my Users Class to functional component and My its is working fine. Here is My Example.

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3),
    overflowX: "auto"
  },
  table: {
    minWidth: 650
  }
}));

const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("http://127.0.0.1:8000/users")
      .then(data => {
        return data.json();
      })
      .then(data => {

        setUsers([{ a: "a" }], () => {
          console.log(users, "testuser");
        });

        console.log("Users state", this.state.users);
      })
      .catch(err => {
        setUsers([{ a: "a" }], () => {
          console.log(users, "testuser");
        });

        console.log("Error Occurs");
      });
  }, []);

  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>User ID</TableCell>
            <TableCell align="right">Username</TableCell>
            <TableCell align="right">User Address</TableCell>
            <TableCell align="right">UserAge</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

          {users.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.user_id}
              </TableCell>
              <TableCell align="right">{row.username}</TableCell>
              <TableCell align="right">{row.user_address}</TableCell>
              <TableCell align="right">{row.user_age}</TableCell>
            </TableRow>
          ))}

        </TableBody>
      </Table>
    </Paper>
  );
};

export default Users;

Now, Your error will be solved hopefully!.

If You are using local_library Then You must have to link it in order to use Local Library. Just use npm link <Your_Library_path> command. Just like this.

npm link <path_to_local_library>/node_modules/local_library

and Now, Your error must be solved.

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

Leave a Comment