Unhandled Runtime Error. Error: Invalid hook call.

[aur42]

Hi. I followed the instructions (npm i, import the thingy, create state variables, and create the component in my code and I get the following error:

Unhandled Runtime 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 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Here is my code: return (

{age && Age: {age} }

{`${firstName} ${lastName}`}

${ ratePerHour }

{ { title } }

  </div>
    <Calendar></Calendar>
</div>)

};

dproc96 commented 3 years ago

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

aur42 commented 3 years ago

Hey Dan, thanks for the response.

Here's my component:

import { some } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; import { useRouter } from 'next/router' import { selectProvider } from '../../store/actions/authActions' import { toggleFavProduct } from './../../store/actions/userActions' //import Tilt from 'react-parallax-tilt' import Description from @.***/react/esm/description' import CalendarTemplate from '../../node_modules/availability-calendar-react '

const ProductItem = ({ uuid, age, bio, bookings, currentAddress, firstName, lastName, profileImg, reviews, ratePerHour, stripeCustomerId, title, passions, rating, id}) => { const dispatch = useDispatch() const router = useRouter() const { favProducts } = useSelector(state => state.user); const [ availability, setAvailability ] = React.useState([]) const Calendar = CalendarTemplate({ availability, setAvailability })

const isFavourite = some(favProducts, productId => productId === id)

const clickSelectProvider = () => { const provider = { uuid: uuid, age: age, bio: bio, bookings: bookings, currentAddress: currentAddress, firstName: firstName, lastName: lastName, profileImg: profileImg, reviews: reviews, ratePerHour: ratePerHour, stripeCustomerId: stripeCustomerId, title: title, passions: passions, rating: rating} dispatch(selectProvider(provider)) router.push('/product') }

return (

{age && Age: {age} }

{`${firstName} ${lastName }`}

${ ratePerHour }

{ { title } }

) };

export default ProductItem

On Tue, Jun 29, 2021 at 9:23 AM Dan Proctor @.***> wrote:

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dproc96/avaiability-calendar-react/issues/2#issuecomment-870595940, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPFAHZZ6LWOI2AFEGUXBQDTVHCLVANCNFSM47PAEL5Q .

aur42 commented 3 years ago

And here is a screenshot of the error:

On Tue, Jun 29, 2021 at 11:02 PM Arnold Lee @.***> wrote:

Hey Dan, thanks for the response.

Here's my component:

import { some } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; import { useRouter } from 'next/router' import { selectProvider } from '../../store/actions/authActions' import { toggleFavProduct } from './../../store/actions/userActions' //import Tilt from 'react-parallax-tilt' import Description from ' ..@.***/react/esm/description' import CalendarTemplate from ' ../../node_modules/availability-calendar-react'

const ProductItem = ({ uuid, age, bio, bookings, currentAddress, firstName, lastName, profileImg, reviews, ratePerHour, stripeCustomerId, title, passions, rating, id}) => { const dispatch = useDispatch() const router = useRouter() const { favProducts } = useSelector(state => state.user); const [ availability, setAvailability ] = React.useState([]) const Calendar = CalendarTemplate({ availability, setAvailability })

const isFavourite = some(favProducts, productId => productId === id)

const clickSelectProvider = () => { const provider = { uuid: uuid, age: age, bio: bio, bookings: bookings, currentAddress: currentAddress, firstName: firstName, lastName: lastName, profileImg: profileImg, reviews: reviews, ratePerHour: ratePerHour, stripeCustomerId: stripeCustomerId, title: title, passions: passions, rating: rating} dispatch(selectProvider(provider)) router.push('/product') }

return (

{age && Age: {age} }

{`${firstName} ${ lastName}`}

${ ratePerHour }

{ { title } }

) };

export default ProductItem

On Tue, Jun 29, 2021 at 9:23 AM Dan Proctor @.***> wrote:

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dproc96/avaiability-calendar-react/issues/2#issuecomment-870595940, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPFAHZZ6LWOI2AFEGUXBQDTVHCLVANCNFSM47PAEL5Q .

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[dproc96]

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

[aur42]

Hey Dan, thanks for the response.

Here's my component:

import { some } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; import { useRouter } from 'next/router' import { selectProvider } from '../../store/actions/authActions' import { toggleFavProduct } from './../../store/actions/userActions' //import Tilt from 'react-parallax-tilt' import Description from @.***/react/esm/description' import CalendarTemplate from '../../node_modules/availability-calendar-react '

const ProductItem = ({ uuid, age, bio, bookings, currentAddress, firstName, lastName, profileImg, reviews, ratePerHour, stripeCustomerId, title, passions, rating, id}) => { const dispatch = useDispatch() const router = useRouter() const { favProducts } = useSelector(state => state.user); const [ availability, setAvailability ] = React.useState([]) const Calendar = CalendarTemplate({ availability, setAvailability })

const isFavourite = some(favProducts, productId => productId === id)

const clickSelectProvider = () => { const provider = { uuid: uuid, age: age, bio: bio, bookings: bookings, currentAddress: currentAddress, firstName: firstName, lastName: lastName, profileImg: profileImg, reviews: reviews, ratePerHour: ratePerHour, stripeCustomerId: stripeCustomerId, title: title, passions: passions, rating: rating} dispatch(selectProvider(provider)) router.push('/product') }

return (

{age && Age: {age} }

{`${firstName} ${lastName }`}

${ ratePerHour }

{ { title } }

) };

export default ProductItem

On Tue, Jun 29, 2021 at 9:23 AM Dan Proctor @.***> wrote:

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dproc96/avaiability-calendar-react/issues/2#issuecomment-870595940, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPFAHZZ6LWOI2AFEGUXBQDTVHCLVANCNFSM47PAEL5Q .

[aur42]

And here is a screenshot of the error:

On Tue, Jun 29, 2021 at 11:02 PM Arnold Lee @.***> wrote:

Hey Dan, thanks for the response.

Here's my component:

import { some } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; import { useRouter } from 'next/router' import { selectProvider } from '../../store/actions/authActions' import { toggleFavProduct } from './../../store/actions/userActions' //import Tilt from 'react-parallax-tilt' import Description from ' ..@.***/react/esm/description' import CalendarTemplate from ' ../../node_modules/availability-calendar-react'

const ProductItem = ({ uuid, age, bio, bookings, currentAddress, firstName, lastName, profileImg, reviews, ratePerHour, stripeCustomerId, title, passions, rating, id}) => { const dispatch = useDispatch() const router = useRouter() const { favProducts } = useSelector(state => state.user); const [ availability, setAvailability ] = React.useState([]) const Calendar = CalendarTemplate({ availability, setAvailability })

const isFavourite = some(favProducts, productId => productId === id)

const clickSelectProvider = () => { const provider = { uuid: uuid, age: age, bio: bio, bookings: bookings, currentAddress: currentAddress, firstName: firstName, lastName: lastName, profileImg: profileImg, reviews: reviews, ratePerHour: ratePerHour, stripeCustomerId: stripeCustomerId, title: title, passions: passions, rating: rating} dispatch(selectProvider(provider)) router.push('/product') }

return (

{age && Age: {age} }

{`${firstName} ${ lastName}`}

${ ratePerHour }

{ { title } }

) };

export default ProductItem

On Tue, Jun 29, 2021 at 9:23 AM Dan Proctor @.***> wrote:

Hi Arnold, thanks for reaching out. Could you provide a little more context of your component? Nothing looks wrong in the return statement

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/dproc96/avaiability-calendar-react/issues/2#issuecomment-870595940, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPFAHZZ6LWOI2AFEGUXBQDTVHCLVANCNFSM47PAEL5Q .