My ReactJS module page component is not rendering for some reason

Question

On my react application, the module page component is not rendering, this is the error is receive when I load the component. In this component, I am trying to read data from the firebase real time database and then display it on the page.

Uncaught ReferenceError: initialize is not defined

I also get this error as well

Uncaught Error: ModulePage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The following is my code for the module page component

 import Header from './header.js';
    import Footer from './footer.js'
    import './review_index.css';
    import { Card, Button } from "react-bootstrap";
    import React, {useEffect, initialize} from 'react';
    import { useNavigate} from "react-router-dom";
    import {realtimeDB, auth } from '../firebase-config';  
    import { ref, onValue } from 'firebase/database';
    import { useAuthState } from 'react-firebase-hooks/auth';



    function ModulePage(){
    let navigate = useNavigate();
    //if statement that checks if the page is being accessed by the user
    const [user] = useAuthState(auth);
    if(!user){
        navigate("/");
    }
    //function to get the data
     const getData = () => {
    const data = ref(realtimeDB, 'Modules') 
    onValue(data, (snapshot) => {
        return(
            <>
            <Header />
            <h1>Welcome to the module page</h1>
            <p> on this page, yopu will see the modules that you can currently upload reviews on</p>
            <Card className="module_card">
                <h2>Module list</h2>
                <p>{snapshot.val()}</p>
                <Button className="moduleselection" onClick={navigate("/ModuleReviewForm")}> </Button>
            </Card>
            <div className="moduleselection"></div>
            <Footer />
            </>
        );
    })
  }
  initialize = true
  useEffect(() => {
    getData();
  }, [initialize])
}
  
export default ModulePage;

I really need help on this, any advice will be much appreciated.

Answer 1

You have this import:

import React, {useEffect, initialize} from 'react';

And initialize does not exist in the React library, remove this one import and declare initialize as a variable on your code.