getting an error related to react hook useHistory

user_10112169 0
Viewed 4724

I have implemented useHistory() same as i implemented below , previously i didnt get any error but in this compmonent i am getting an error as

Line 6:18: React Hook "useHistory" is called in function "showPost" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import {useHistory} from 'react-router-dom';

const showPost = () =>{
    let history = useHistory();

    const closeUpload = () =>{
        history.goBack();
    }

    return(
        <div className="overlay">
            <div className="overlay-container">
                <button className="close-btn" onClick = {closeUpload}><CloseIcon color="action"/></button>
                <h1>Hello</h1>
            </div>
        </div>
    );
}

export default showPost;

please, help me in solving this. thank you in advance.

react-router-dom react-hooks reactjs javascript
2 Answers

You should allways call your React component with Capital letter.

UPD: From https://reactjs.org/docs/components-and-props.html#rendering-a-component

Note: Always start component names with a capital letter. React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

user_47667810
user_19946460
Related