CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authentication
Lazy coder
Lazy coder

Reputation: 61

How to show display data in React

I am new in react. Last day i tried to do work with Firebase in a react JS project. But i stuck on that. I set up sign in method according to the Firebase and i wanted to display all display name,email,photoUrl from the user who are sign in through sign in button.But i faced a problem i couldn't show these data but my console said i passed data successfully. I saw all data by console but why i don't show on the page. I try to fix all error but it's not change anything.My code is below:

import './App.css';
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import firebaseConfig from './firebase.confige';
import React,{useState} from 'react';


// firebase.initializeApp(firebaseConfig)

if(!firebase.apps.length){
    firebase.initializeApp(firebaseConfig);
}
function App() {

const [user,setUser] = useState( 
{
isSignIn: false,
name: '',
email: '',
photo: ''
})

console.log(user)

const provider = new firebase.auth.GoogleAuthProvider();

const handleSignIn = ()=>{
  firebase.auth().signInWithPopup(provider)
  .then(res => {
 const {displayName, photoURL, email} = res.user;
  

  const signedInUser = {
    isSignIn:true,
    name: displayName,
    email: email,
    photo:photoURL
   }
  setUser(signedInUser);
  // console.log(displayName,email,photoURL);
  })
  .catch(err => {
  console.log(err);
  console.log(err.message);
 })
}
return (
 <div className="App">
 <button onClick={handleSignIn}>Sign In</button>
 {
   user.isSignedIn && 
   <div>
     <p> Welcome, {user.name}</p>
     <p>Your email: {user.email}</p>
     <img src={user.photo} alt=""/>
   </div>

   }
   </div>
  );
 }

export default App;

firebase.Confige.js file is here:

const firebaseConfig = {
apiKey: "AIzaSyBPt45m9rGYcMJy5Ynq4PtEroNsSDYUcUM",
authDomain: "ema-john-simple-61839.firebaseapp.com",
projectId: "ema-john-simple-61839",
storageBucket: "ema-john-simple-61839.appspot.com",
messagingSenderId: "813068797804",
appId: "1:813068797804:web:297c9d66d20a005cd15549",
measurementId: "G-8DGK2DEVBS"
};
export default firebaseConfig;

first starting with sign in starting with sign in method console show user name email and photo enter image description here

display show nothing enter image description here

I didn't find out any solution please help me why this is happening i have to find out

Upvotes: 0

Views: 49

Answers (1)

Henry Winget
Henry Winget

Reputation: 84

You're checking for value user.isSignedIn in your JSX and, if truthy, are displaying your values.

However, earlier in your handleSignIn method, you adjust the property isSignIn value to true if the sign-in is successful.

You should be checking for isSignIn in your JSX instead of isSignedIn.

Upvotes: 1

Related Questions