Реагировать на Facebook Войти - Скрыть кнопку после входа

Question

У меня есть простое приложение React, которое входит в систему с помощью Facebook и сохраняет данные в базе данных Firebase.

Что мне нужно сделать, чтобы скрыть кнопку Facebook и отобразить текстовое сообщение о том, что вы вошли в систему?

function App() {

const responseFacebook = (response) => {
    const payload = {
        id: response.id,
        name: response.name,
        email: response.email,
        token: response.accessToken,
        picture: response.picture

    }

    writeUserData(response.id, response.name, response.email)

};

function writeUserData(id, name, email) {
    fire.database().ref('usersUsername/' + name).set({
        fbID: id,
        name: name,
        refDJ: "none",
        email: email
    }, function(error) {
        if (error) {
            // The write failed...
        } else {
            // Data saved successfully!

            // Change Button to Text Coming soon to IOS



        }
    });
}

return (
<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
        <FacebookLogin
            //autoLoad={true}
            appId="2009920755111111" //APP ID NOT CREATED YET
            fields="name,email,picture"
            callback={responseFacebook}
            textButton = "Join with Facebook"
            icon="fa-facebook"
        />
    </p>

  </header>
</div>

);}

приложение экспорта по умолчанию;

Answer 1

Вам потребуется использовать React hooks , чтобы сохранить состояние приложения. Вам нужно состояние, чтобы определить, вошел ли пользователь в систему или нет, и в зависимости от этого состояния показать кнопку или текст.

Во-первых, вам нужно объявить, какую переменную вы хотите, loggedIn, и начальное значение false:

const [loggedIn, setLoggedIn] = useState(false);

Затем вы можете использовать состояние loggedIn, чтобы определить, что следует отображать, и обновить его при входе пользователя в систему.

Вот полный код:

function App() {
    const [loggedIn, setLoggedIn] = useState(false);

    const responseFacebook = (response) => {
        const payload = {
            id: response.id,
            name: response.name,
            email: response.email,
            token: response.accessToken,
            picture: response.picture

        }

        writeUserData(response.id, response.name, response.email)
    };

    function writeUserData(id, name, email) {
        fire.database().ref('usersUsername/' + name).set({
            fbID: id,
            name: name,
            refDJ: "none",
            email: email
        }, function(error) {
            if (error) {
                // The write failed...
            } else {
                // Data saved successfully!
                setLoggedIn(true)

                // Change Button to Text Coming soon to IOS
            }
        });
    }

    return (
        <div className="App">
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            { !loggedIn ?
                <FacebookLogin
                    //autoLoad={true}
                    appId="2009920755111111" //APP ID NOT CREATED YET
                    fields="name,email,picture"
                    callback={responseFacebook}
                    textButton = "Join with Facebook"
                    icon="fa-facebook"
                />
            :
                <p>Logged In!</p>
            }
      </header>
    </div>

); }

export default App ;