I am using NextJS for server side rendering & I am trying to use useState hook inside a component which is throwing :
Error:
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
My code:
import { useState } from 'react';
const Banner = ({ movies }) => {
const [movie, setMovie] = useState(movies);
return (
<header>
<h1> Banner </h1>
</header>
)
}
export default Banner;
Directory Tree
/components/Banner.js
/pages
Getting same error when i use useEffect() like :
import React, {useEffect} from 'react'
Related
Everytime i use react bootstrap component it doesn't work and gives invalid hook error.
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function ShowProducts() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<div className="App">
<p>Working</p>
<Button>Test</Button>
</div>
)
}
export default ShowProducts;
it gives following in console:
react.development.js:209 Warning: 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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
import {useState} from 'react'
const nav = () => {
const [activeNav, setActiveNav] = useState('#')
}
I was trying to build a nav bar.
and I am getting this error I don't know why
React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks
Basically it seems like one or both of the following is the cause of your issue:
nav is not a valid React component. React components are capitalized.
nav might not be rendered as a React component.
Rename to Nav so it's at least named correctly.
import {useState} from 'react'
const Nav = () => {
const [activeNav, setActiveNav] = useState('#');
...
return (
// return valid JSX
);
}
Render Nav as a React component:
Valid
<Nav />
Invalid
{Nav()}
I am trying to create react Hoc as functional component to check authenticated users,
I don't want to use local storage so i am using redux-persist to save the token
this is what I did
import React from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
export default Component => {
const history = useHistory();
const { token } = useSelector(state => state.user);
return token ? <Component /> : history.push('/login');
};
I got this error
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
import React, {useState} from 'react'
import Layout from "../components/layout"
const blog = () => {
const [state, setState] = useState({
name: 'Kerry',
age: 20
});
return (
<Layout>
<div>
<h1>blog</h1>
<p>Post will show up here later on</p>
{state.name + state.age}
</div>
</Layout>
)
}
export default blog
Hi I am trying to print out name from state. I am using react hooks. This project is built in gatsby command.
From my understanding the line {state.name + state.age} should return my name and age.
but the programs terminal is returning rebuilding failed
Also The program is giving me 2 error.
here theses two
5:19 warning 'setState' is assigned a value but never used no-unused-vars
5:31 error React Hook "useState" is called in function "blog" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
So a, i using useState wrong
Components must start with capital letters. You have to change blog to Blog. The rest of the code seems correct.
This is because if they start with a lowercase letter, it is interpreted as a built-in component such as <p> or <img> by React. Since they are passed to React.createElement it breaks your code.
You can check for further information in React's official documentation.
I have imported useStats into my index page but when I use it it breaks gatsby/react and I get this error:
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:
You might have mismatching versions of React and the renderer
(such as React DOM)
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
I tried to trouble shoot using this from the site:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
But I got back true.
Here is my code:
import React, { useState } from "react";
import { Link } from "gatsby";
// components
import Layout from "../components/Layout/Layout";
import SEO from "../components/seo";
import IndexComponent from "../components/IndexComponent/IndexComponent";
const IndexPage = () => {
const [sku] = useState();
return (
<Layout>
<SEO title="Home" />
<IndexComponent />
</Layout>
);
};
export default IndexPage;
1.) you need [sku, setSku] = useState().
2.) Where are you rendering IndexPage? Are you doing IndexPage() instead of <IndexPage />?
I think It is a terminal Issue with windows.
Seams to work fine with bash.