Hy there
i have a problem with my code. I get the TypeError: Cannot read properties of undefined (reading ‘value’) and i don’t know why. I worked perfectly and now it stoped. Could the problem also be the rules on Firebase Database?
I checked my console and i can’t get any value from the input boxes after ‘handleSubmit’
import "../styles/forms.css"
import { getDatabase } from 'firebase/database'
import { ref, set } from 'firebase/database'
import { ImSpotify } from "react-icons/im";
import { FaTicketAlt } from "react-icons/fa";
import { VscGlobe } from "react-icons/vsc";
import { getAuth } from "firebase/auth";
function ProfileLocations() {
const db = getDatabase();
function handleSubmit(g) {
g.preventDefault();
const auth = getAuth();
const user = auth.currentUser.reloadUserInfo.localId;
let LocationNameData = g.target.location_name.value;
let LocationFormOfAdressData = g.target.location_formofadress.value;
let LocationOwnerNameData = g.target.location_owner_name.value;
let LocationEmailData = g.target.location_email_name.value;
let LocationPhoneData = g.target.location_phone_name.value;
let LocationStreetData = g.target.location_street_name.value;
let LocationPostalCodeData = g.target.location_postalcode_name.value;
let LocationPlaceData = g.target.location_place_name.value;
let LocationStateData = g.target.location_state_name.value;
let LocationCountryData = g.target.location_country_name.value;
let LocationCapacityData = g.target.location_capacity_name.value;
let LocationSmokeData = g.target.location_smoke_name.value;
let LocationParkingData = g.target.location_parking_name.value;
let LocationCateringData = g.target.location_catering_name.value;
let LocationAccessibilityData = g.target.location_accessibility_name.value;
let LocationURLSpotifyData = g.target.location_url_spotify_name.value;
let LocationURLTicketshopData = g.target.location_url_ticketshop_name.value;
let LocationURLWebsiteData = g.target.location_url_website_name.value;
set(ref(db, `locations/identify/`+ user), {
name: LocationNameData,
})
set(ref(db, `locations/public/`+ LocationNameData + `/data/`), {
userID: user,
name: LocationNameData,
formofadress: LocationFormOfAdressData,
owner: LocationOwnerNameData,
email: LocationEmailData,
phone: LocationPhoneData,
street: LocationStreetData,
postalcode: LocationPostalCodeData,
place: LocationPlaceData,
state: LocationStateData,
country: LocationCountryData,
capacity: LocationCapacityData,
smoke: LocationSmokeData,
parking: LocationParkingData,
catering: LocationCateringData,
accessibility: LocationAccessibilityData,
urlSpotify: LocationURLSpotifyData,
urlTicketshop: LocationURLTicketshopData,
urlWebsite: LocationURLWebsiteData,
})
}
return (
<div className='container-background-user'>
<div className='container-wrapper-user'>
<div className='wrapper-location'>
<form className='form-location' onSubmit={(g) => handleSubmit(g)}>
<div className='input-group-location'>
<div className='container-title-location-logo'>
<div>
<h1>PROFILDATEN</h1>
<br></br>
<h2>Trage bitte alle geforderten Daten ein, damit du alle Funktionen für Madcor freischaltest.</h2>
<div className='logo-location'>
<h1 id='logo-location'>Logo</h1>
<button></button>
</div>
<h2 className='first-h2'>DATEN</h2>
</div>
</div>
<div className='first-row-location'>
<div className='input-location-required'>
<label>Location</label>
<input placeholder='Name Location' name='location_formofadress' required></input>
</div>
<div className='input-location-required'>
<label>Anrede</label>
<input placeholder='Anrede' name='location_owner_name' required></input>
</div>
<div className='input-location-required'>
<label>Inhaber</label>
<input placeholder='Name Inhaber' name='location_owner_name' required></input>
</div>
<div className='input-location-required'>
<label> E-Mail</label>
<input type='email' placeholder='Name Location' name='location_email_name' required></input>
</div>
<div className='input-location'>
<label>Telefonnummer</label>
<input placeholder='Name Location' name='location_phone_name'></input>
</div>
</div>
<hr></hr>
<h2 id='second-h2'>ANSCHRIFT</h2>
<div className='second-row-location'>
<div className='input-location-required'>
<label>Strasse</label>
<input placeholder='Strasse' name='location_street_name' required></input>
</div>
<div className='input-location-required'>
<label>PLZ</label>
<input placeholder='Postleitzahl' name='location_postalcode_name' required></input>
</div>
<div className='input-location-required'>
<label>Ort</label>
<input placeholder='Ort' name='location_place_name' required></input>
</div>
<div className='input-location-required'>
<label>Bundesland</label>
<input placeholder='Bundesland' name='location_state_name' required></input>
</div>
<div className='input-location-required'>
<label>Land</label>
<input placeholder='Land' name='location_country_name' required></input>
</div>
</div>
<hr></hr>
<h2 id='second-h2'>LOCATION</h2>
<div className='third-row-location'>
<div className='input-location-required'>
<label>Kapazität</label>
<input placeholder='Auswahl' name='location_capacity_name' required></input>
</div>
<div className='input-location-required'>
<label>Raucherbereich</label>
<input placeholder='Ja/Nein' name='location_smoke_name' required></input>
</div>
<div className='input-location-required'>
<label>Parkplätze</label>
<input placeholder='Ja/Nein' name='location_parking_name' required></input>
</div>
<div className='input-location-required'>
<label>Verpflegung</label>
<input placeholder='Ja/Nein' name='location_catering_name' required></input>
</div>
<div className='input-location-required'>
<label>Barrierefreiheit</label>
<input placeholder='Rollstuhlgerecht?' name='location_accessibility_name' required></input>
</div>
</div>
<div className='fourth-row-location'>
<div className='input-location'>
<label><ImSpotify/> SPOTIFY</label>
<input type='url' placeholder='URL Spotify' name='location_url_spotify_name'></input>
</div>
<div className='input-location'>
<label><FaTicketAlt/> TICKET</label>
<input type='url' placeholder='URL Ticketshop' name='location_url_ticketshop_name'></input>
</div>
<div className='input-location'>
<label><VscGlobe/> WEBSITE</label>
<input type='url' placeholder='URL Website' name='location_url_website_name'></input>
</div>
</div>
<div className='button-location'>
<button type='submit'>ÄNDERN</button>
<button>SPEICHERN</button>
<br></br>
</div>
</div>
</form>
</div>
</div>
</div>
);
}
export default ProfileLocations;
1