Данные провайдера Firebase переданы в подпорках, проблемы с доступом в componentDidMount

Question

Использование Firebase и возможность передачи providerData в реквизиты.

Хотя при передаче другому компоненту я не могу извлечь из массива в componentDidMount.

Я застрял напытается показать электронную почту пользователя с помощью: console.log(this.state.providerData[0].email )

Получение TypeError: Cannot read property '0' of undefined.

Это для создания-реагировать-приложение;пытаясь получить идентификатор пользователя для запуска дальнейших команд ajax.

App.js

// React core.
import React, { Component } from 'react';

// Firebase.
import firebase from 'firebase/app';
import 'firebase/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// Styles
import styles from './index.css'; // This uses CSS modules.
import './firebaseui-styling.global.css'; // Import globally.

//Components
import Dashboard from './components/Dashboard';

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN
});

class App extends Component {

  state = {
    isSignedIn: undefined,

  };


  uiConfig = {
    signInFlow: 'popup',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => false,
    },
  };

  componentDidMount() {
    this.unregisterAuthObserver = firebaseApp.auth().onAuthStateChanged((user) => {
      this.setState({ isSignedIn: !!user });
      //User is signed in.
      console.info('User is signed in.');
      this.setState({providerData: user.providerData})   
    });
  }

  componentWillUnmount() {
    this.unregisterAuthObserver();
  }

  render() {
    return (  
      <div className={styles.container}>
        {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
          //Not signed-in yet
          <div>
            <Login />
            <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
              firebaseAuth={firebaseApp.auth()} />
          </div>
        }

        {this.state.isSignedIn &&
          //Signed in
          <div className={styles.signedIn} id="content-wrap">
            <Dashboard providerData={this.state.providerData} />
            <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>   
          </div>
        }   
      </div>
    );
  }
}

export default App;

Dashboard.js

import React, { Component } from 'react';


class Dashboard extends Component {

    state = {
        newEntry: false,
        newEntryButton: true,
        habitData: [],
        hamburgerOpen: false,
        checkIn: false,
        habitExist: false,
        user: '',
    };


    componentDidMount = () => {

          console.log(this.state.providerData[0].email )

        }




    render() {
        return (
            <div id="content-wrap">

                <h1>test</h1>
            </div>
        );
    }
}

export default Dashboard;

Я хочу поставить pgamble@gmail.com вconsole.

Если удалить строку консоли, в которой заполняются реквизиты:

Answer 1

В Dashboard, не должен ли он быть доступен через this.props вместо this.state?