score:1
Accepted answer
you can create a custom function inside your login. jsx
file to call the original signinwithgithub
method with a try
catch
block. and more importantly, you should not use render
inside a functional component. use return
to render the jsx
in dom.
firebase.js
export const signinwithgithub = async () => {
try {
const res = await signinwithpopup(auth, githubprovider);
const user = res.user;
} catch (err) {
throw new error(err?.message || "unable to sign in with github");
}
};
login.jsx
import react, { useeffect, usestate } from "react";
import { useauthstate } from "react-firebase-hooks/auth";
import { auth, signinwithgithub } from "../lib/firebase";
function login() {
const [user, loading, error] = useauthstate(auth);
const [errormessage, seterrormessage] = usestate("");
const onlogin = async () => {
try {
await signinwithgithub();
} catch (err) {
seterrormessage(err);
}
};
return (
<>
<button onclick={onlogin}>login with github</button>
{!!errormessage && <h5>{errormessage}</h5>}
</>
);
}
Source: stackoverflow.com
Related Query
- React Function to Component and Setting State with Function Return
- Setting and updating state in React JS with Dropdown component from Material UI
- Passing state up from child component and call a function with React
- React js app - setting functional component's state with a returned value from function in class component (error: undefined)
- Typescript and React setting initial state with empty typed array
- Mock React useRef or a function inside a functional component with enzyme and jest?
- Testing debounced function in React component with Jest and Enzyme
- _this.store.getState is not a function when testing react component with enzyme and mocha
- Sync queryParameters with Redux state and react router for function components
- How to test with jest and typescript with types a basic react function component
- React - Setting component state using a function outside of state, is it wrong?
- React testing state of component with Jest and Enzyme
- how to set react parent component state by a async function and then pass this state to child as props?
- React expose component function and getting data with ComponentDidMount
- React Function component setting state variable V/s using local variable
- How to store react component in state and pass a callback function
- React Router difference between component with and without function
- Is setting a value outside of both state and props in a React component an anti-pattern?
- How to call event from component after setting its state with React hooks?
- Typescript React component with function overload and generic params
- Setting state inside promise and outside promise affects on rendering component in react
- React Function Component Form not setting state variables?
- React useState. Why do the docs advise passing a function with the previous state when setting the state?
- How can I set the state and return JSX with the same function
- Render React component with onClick and execute props function
- How can I return a React Component from a function and render it onClick?
- testing react function with state update on input text using jest, rtl, and ionic
- React navigation with hooks and header function - state is not updating
- How to use a state value with map function to display repeat ui in react component
- Problem with use of map function in react for setting text and color of buttons
More Query from same tag
- ReactJS - update user at state array
- How to add a prop to components inside an array?
- Marker not shown in google-maps-react
- react maps google outsie Grid
- React Popup not showing correctly
- How to filter data using react?
- Auto Adjust Font size In React Native
- Reset Button for highchart drilldown pie
- Is it possible to use Material UI library with React Native?
- react router: pressing back button does not bring user back to previous page
- Remove (or at least hide) card on react-admin List
- In React, how to convert country code to country name, using country-data?
- Storybook throws error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
- how to make parent function not work when the button is pressed
- WebpackError: TypeError: Cannot destructure property
- Trigger Notification/Callback after reflux action execution
- Video autoplay does not work on mobile (React)
- If I'm using the same react/redux component twice, will they share state?
- I'm trying to number my Markers and show InfoWindow with google-maps-react
- Input component > feeds Forms component - how to handle submit?
- Reactjs delete an item from Dexie.js
- Adding modal popup to cells in ant design table
- How can you check if there is an existing value in the array and not add it another time if so?
- Checking if date has changed with React/Redux + Moment.JS
- How to a use bootstrap grid for an array created by a map method in react?
- Links to external resource are empty in React
- TypeError: Cannot read property 'quote' of undefined React js
- react.js app showing 404 when refreshing in nginx server configured on macos
- Change the color of an UIkit icon in react
- React redux-strange behavior, prevState and newState change together