reactjs - Properly LogOut button React

Question

can't get the logout button to work properly. I'm using React and Firebase. Here is a portion of the code from App.js, where the function was declared

imports

import React, { useState, useEffect } from "react";
import { fire } from './fire';
import LogIn from './LogIn';
import Hero from './Hero';
import './App.css';

declaration

const handleLogout = () => {
  fire.auth().signOut();
};

And here is the code from the Hero.js, where the function is used

import React from 'react';
import Contact from "./components/Contact";

const Hero = (handleLogout) => {

    return(
        <section className="hero">
            <nav>
                <h2>Welcome</h2> 
                <button onClick = {handleLogout}>Log Out</button>
            </nav>
            <div id="contact-form">
                <Contact />
            </div>
        </section>
    )
}
export default Hero;

What I'm doing wrong?

Answer 1

you need to get the handleLogout from props properly:

const Hero = ({handleLogout}) => {...}