where does the data of any react form get stored - reactjs

Question

I have coded this so how to fetch the data as I have added social logins and phone so I have query where data gets stored in reactjs and how I have to fetch data I want e-mail and phone number and name when somebody login so that I can integrate apis
import React, { Component } from "react"
import firebase from "firebase"
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth"
firebase.initializeApp({
apiKey: "AIzaSyBPqAebQzVeT5Kbd57TsDwoF_l3pRCVomY",
authDomain: "login-project-d33bf.firebaseapp.com"
})
class SocialLogin extends Component {
state = { isSignedIn: false }
uiConfig = {
signInFlow: "popup",
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PHONE_SIGN_IN_METHOD,
],
callbacks: {
signInSuccess: () => false
}
}
componentDidMount = () => {
firebase.auth().onAuthStateChanged(user => {
this.setState({ isSignedIn: !!user })
console.log("user", user)
firebase.database().ref("signInSuccess").on("value", snapshot => {
let signInSuccess = [];
snapshot.forEach(snap => {
signInSuccess.push(snap.val());
})
this.setState({signInSuccess : signInSuccess})
})
})
}
render() {
return (
<div className="App">
{this.state.isSignedIn ? (
<span>
<div>Signed In!</div>
<button onClick={() => firebase.auth().signOut()}>Sign out!</button>
<h1>Welcome {firebase.auth().currentUser.displayName}</h1>
<img
alt="profile picture"
src={firebase.auth().currentUser.photoURL}
/>
</span>
) : (
<StyledFirebaseAuth
uiConfig={this.uiConfig}
firebaseAuth={firebase.auth()}
/>
)}
{this.state.signInSuccess.map(data =>{
return (
<tr>
<td>{data.email}</td>
<td>{data.mobilenumber}</td>
</tr>
)
})}
</div>
)
}
}
export default SocialLogin
so where does the data get store because I have to fetch the data from the code so I have to fetch data useremail and phonenumber and name so how can I do it?

Answer 1

It looks like the error is occurring because this.state.signInSuccess is not an array. May be good to check if this.state.signInSuccess is an array with data prior to perform the .map
render() {
const { signInSuccess, isSignedIn } = this.state;
const isSignInSuccess = Array.isArray(signInSuccess);
return (
<div className="App">
{isSignedIn ? (
<span>
<div>Signed In!</div>
<button onClick={() => firebase.auth().signOut()}>Sign out!</button>
<h1>Welcome {firebase.auth().currentUser.displayName}</h1>
<img
alt="profile picture"
src={firebase.auth().currentUser.photoURL}
/>
</span>
) : (
<StyledFirebaseAuth
uiConfig={this.uiConfig}
firebaseAuth={firebase.auth()}
/>
)}
{isSignInSuccess && isSignInSuccess.map(data =>{
return (
<tr>
<td>{data.email}</td>
<td>{data.mobilenumber}</td>
</tr>
)
})}
</div>
)
}