How to provide functions via context in ReactJS? - reactjs

Question

I have a React UI kit and want to get some functionality to it. I also have some functionality without the UI. Both are working separately, but I cannot manage to work together due to the error
TypeError: Cannot destructure property 'authenticate' of
'Object(...)(...)' as it is undefined.
I have an account object which is the context provider (Accounts.js, shortened for brevity):
import React, { createContext } from 'react'
import { CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js'
import Pool from 'UserPool'
const AccountContext = createContext()
const Account = (props) => {
const getSession = async () =>
await new Promise((resolve, reject) => {
...
})
const authenticate = async (Email, Password) =>
await new Promise((resolve, reject) => {
...
})
const logout = () => {
const user = Pool.getCurrentUser()
if (user) {
user.signOut()
}
}
return (
<AccountContext.Provider
value={{
authenticate,
getSession,
logout
}}
>
{props.children}
</AccountContext.Provider>
)
}
export { Account, AccountContext }
And I have SignIn.js Component which throws the error (also shortened):
import React, { useState, useEffect, useContext } from 'react';
import { Link as RouterLink, withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import validate from 'validate.js';
import { AccountContext } from 'Accounts.js';
const SignIn = props => {
const { history } = props;
const [status, setStatus] = useState(false);
const { authenticate, getSession } = useContext(AccountContext);
const classes = useStyles();
const [formState, setFormState] = useState({
isValid: false,
values: {},
touched: {},
errors: {}
});
useEffect(() => {
const errors = validate(formState.values, schema);
setFormState(formState => ({
...formState,
isValid: errors ? false : true,
errors: errors || {}
}));
getSession()
.then(session => {
console.log('Session:', session);
setStatus(true);
});
}, [formState.values]);
const handleSignIn = event => {
event.preventDefault();
authenticate(formState.values.email, formState.values.password)
.then(data => {
console.log('Logged in!', data);
//setStatus(true);
})
.catch(err => {
console.error('Failed to login!', err);
//setStatus(false);
})
history.push('/');
};
return (
<div className={classes.root}>
</div>
);
};
SignIn.propTypes = {
history: PropTypes.object
};
export default withRouter(SignIn);
I guess something is wrong with the Accounts.js because the SignIn.js cannot use the authenticate or getSession functions. I need those in the context because other components will render differently when a user is signed in and getSession exactly retrieves this info. Accounts.js is calling against AWS Cognito. I understand how to use variables or states in context but functions seem to work differently. How do I define the functions in Accounts.js to add them to the context so that I can use them in other components as well?

Answer 1

I have tried similar approach in my application.
As per your code, everything is looking fine. The error you have mentioned can be because of wrapping SignIn component wrongly in Provider i.e Account.
Try wrapping SignIn Component inside Account Provider like below:
Import {Account} from './Accounts.js' // Path of Account.js file
<Account> // Account act as Provider as per your code
<SignIn />
...
</Account>
Rest of your code seems fine.