score:1
Accepted answer
you would need to use react hooks to save the state of the app. you need the state to tell whether the user has logged in or not, and depending on that state, show a button or the text.
first, you need to declare what kind of variable you want, loggedin
, and the initial value, false
:
const [loggedin, setloggedin] = usestate(false);
then, you can use the loggedin
state to determine what to render and update it when the user logs in.
heres the full code:
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 ;
Source: stackoverflow.com
Related Query
- React Facebook Login - Hide Button after Login
- Use Facebook Login Button with React
- How to center text in Facebook Login Button for React Native (Android)?
- Hide React button after it is clicked
- How we can update the state of button to logout after successfull login in react redux
- How to hide navbar in login page in react router
- Forcing login in react after 401 from backend
- How I can disable a button in React js for 5 seconds after click event
- React Bootstrap + Formik - show errors after I click submit button
- React Navigation 5, block back navigation after login
- Hide tabs on Login screen in Ionic React
- How do I embed a facebook send button in my react app?
- How to disable a button in React Native after clicking it
- react native and parse, currentuser is null after login and cmd+R
- How to hide a button when printing using react and styled components?
- Redirect to Home after Login on React Redux Application
- React Facebook Login popping up on page load
- Using React Router to Redirect to next page after successful login
- auto hide a div / flash message after few seconds using css3 react
- React google Login firing error on render and after sign in
- React Component Doesn't Update After First Button Click
- How to hide a sidebar from a login page in react router
- React Router `history` and `location` mismatched after back button
- React change login link to logout after login
- react enable button after all form fields are not empty
- React hooks useInterval reset after button click
- Re-rendering react component after clicking Like button (with Redux)
- "this" is undefined for a form after submit but not for button in react
- React MaterialUI - Set error on TextField Component after button is clicked
- React Router v4 login check after hitting Refresh on browser
More Query from same tag
- Cannot find image picker component with 'paste image url' field\tab
- Dynamically add new component
- Quill-blot-formatter is not registering with react-quill on import through next/dynamic and keeps showing loading
- React dynamically create buttons that open the corresponding modal
- How to select only one item from a list?
- React project is not displaying text as I intend
- ReactJS - Call One Component Method From Another Component
- Call a function from within highchart click event in reactjs
- Warning for importing css in gatsby
- Mapping an object of array in Reactjs
- How to replace the URL of an iframe using React?
- Get data from websocket and put it in state
- How can I include this svg in a react component ?
- State is not updating with correct information
- Stop previous and next button increment at a certain value - ReactJS
- my users details is not is not rendering users list when i type in search
- Input text in draft.js
- React History Hook Not Functioning
- Defining a javascript class Method as a constant
- Subscriptions with react-meteor-data
- React: Functional Components, passing and executing functions to event-listeners
- Call function from React component in other component
- Is there a way to have `react-scripts` include extra files in the root of the build?
- unable to move text up in react css component
- Sending parameter with function to child component and back to parent component
- Destructure property whose name is a reserverd keyword
- Having trouble fetching from an api not sure what I am doing wrong?
- Socket.io doesn't work with on event ("connection")
- KeyboardDateTimePicker Material UI Not null validation
- How do I update a JSON and then output it again?