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

Question

Below you can see simpliest component ever that renders a functional component using hooks.

 import React, { Component, useState } from 'react'

    export default class ImageList extends Component {
        render() {
            return (
                <div>
                    {RenderImages()}
                </div>
            )
        }
    }

    export const RenderImages = (props) =>
    {
        const [images,setImages] = useState([])
        return(
            <div>
                Images will be rendered here!
            </div>
        )
    }

Searched but couldn't find solution... Why it's not working? what is wrong with hooks here?

score 14 · Accepted Answer · edited Nov 30 '19 at 11:32

14

<div>
   {RenderImages()}
</div>

As you have called RenderImages as a function and it's confused as there is a Hook usage. If you used it like this it'll work as use it includes RenderImages as a Functional Component.

<div>
   <RenderImages />
</div>

edited Nov 30 '19 at 11:32

Wai Ha Lee

8,598
83
57
92

answered Nov 29 '19 at 23:18

user2340824

2,142
2
15
19

score 3 · Answer 2 · answered Nov 29 '19 at 23:21

3

https://reactjs.org/docs/hooks-rules.html

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function.

answered Nov 29 '19 at 23:21

Max

4,473
1
16
18

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

2 Answers2