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?

Answer 1

<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>