i have this component here:

enter image description here

and this is the code:

import React from 'react'
import { BiLogoInstagramAlt } from "react-icons/bi";
import { FaFacebookF } from "react-icons/fa6";
import { ref, child, get } from 'firebase/database';
import { getDatabase } from 'firebase/database';
import { getAuth } from "firebase/auth";


export const LocationProfileCard = ( ) => {

    const dbRef = ref(getDatabase());
    const auth = getAuth();
    const user = auth.currentUser.reloadUserInfo.localId;

    if (user !== null) {

        get(child(dbRef, `locations/identify/${user}`)).then((snapshot) => {
          if (snapshot.exists()) {
  
        let LocationName = (snapshot.val().name);

        get(child(dbRef, `locations/public/${LocationName}/data/`)).then((snapshot) => {

        })

        } else {
    console.log("No data available");
  }

  
}).catch((error) => {
  console.error(error);
});


  return (
    <div className='card_profile_location_wrapper'>
        <div className='card_profile_form_location_wrapper'>
            <form className='card_profile_form_location_main'>
                <div className='card_profile_location_first_section'>
                    <div className='card_profile_location_logo'>
                        <label>Logo</label>                        
                    </div>
                        <div className='card_profile_location_social_media'>
                            <ul className='wrapper-socialmedia_card_profile'>
                                <li className='icon-insta'>
                                    <span className='tooltip'>Instagram</span>
                                    <span><BiLogoInstagramAlt/></span>
                                </li>
                                <li className='icon-face'>
                                    <span className='tooltip'>Facebook</span>
                                    <span><FaFacebookF/></span>
                                </li>
                            </ul>
                        </div>
                </div>
                <div className='card_profile_location_second_section'>
                    <div className='card_profile_location_data'>
                    <h1>Test</h1>
                    <h3>Informationen</h3>
                    <div className='card_profile_location_data_information_group'>
                        <div className='card_profile_location_data_information'>
                            <h3>Kapazität</h3>
                            <label>Daten</label>
                        </div>
                        <div className='card_profile_location_data_information'>
                            <h3>Raucherbereich</h3>
                            <label>Daten</label>
                        </div>
                        <div className='card_profile_location_data_information'>
                            <h3>Parkplätze</h3>
                            <label>Daten</label>
                        </div>
                        <div className='card_profile_location_data_information'>
                            <h3>Verpfelgung</h3>
                            <label>Daten</label>
                        </div>
                        <div className='card_profile_location_data_information'>
                            <h3>Barrierefreiheit</h3>
                            <label>Daten</label>
                        </div>
                    </div>
                    </div>
                </div>
                <div className='card_profile_location_third_section'>
                </div>
            </form>
        </div>
    </div>
  );
  };
};

As soon as i move this else statement at the bottom of the code (after the closing bracket of the return block)

       } else {
   console.log("No data available");
 }

 
}).catch((error) => {
 console.error(error);
});

the component disappears. I think the problem is, that i include the return block to my Javascript code. Is this the problem?

Could someone explain why?