Material-UI passing data between components - reactjs

Question

This might look like a similar question but I'm unable to get the answer of it on Stackoverflow.
I have two components - A.js and B.js
A.js
(The below code is inside return() )
<Link to={{
pathname: `${simulationId}/edit/${ruleName}`,
search: createButtonQuery,
previewFlag = true,
}}>
<IconButton color="primary" size="small">
<PageviewOutlinedIcon/>
</IconButton>
</Link>
B.js
(The below code is inside return() )
<DialogTitle>{name ? 'Print true' : 'Print false'}</DialogTitle>
Issue:
I want to test for previewFlag inside the B.js. I want to check when the previewFlag is true and name exists, 'Print true' should be returned by the <DialogTitle>
I don't know how to use previewFlag inside B.js though.
Kindly note that <PageViewOutlineIcon> is part of material-ui here.
The both components aren't being imported by each other.

Answer 1

To use a context, there are a few things you have to do:
1: Create a context file (I usually put mine in a contexts folder)
import { createContext, useContext, useEffect, useState } from 'react'
import { auth } from '../firebase'
const AuthContext = createContext()
export function useAuth() {
return useContext(AuthContext)
}
export function AuthProvider({ children }) {
const [currentUser, setCurrentUser] = useState()
const [loading, setLoading] = useState(true)
function login(email, password) {
return auth.signInWithEmailAndPassword(email, password)
}
function signOut() {
return auth.signOut();
}
function signUp(email, password) {
return auth.createUserWithEmailAndPassword(email, password)
}
function getUser() {
return auth.currentUser
}
function isAdmin() {
return auth.currentUser.getIdTokenResult()
.then((idTokenResult) => {
if (!!idTokenResult.claims.admin) {
return true
} else {
return false
}
})
}
function isEditor() {
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
setLoading(false)
})
return unsubscribe
}, [])
const value = {
currentUser,
getUser,
login,
signOut,
signUp
}
return (
<AuthContext.Provider value={value}>
{ !loading && children }
</AuthContext.Provider>
)
}
This is the file that can hold whatever you want to check for
Then, you need to put it in your App/_app (depending on how you're using react) as in this case:
import '../styles/globals.scss'
import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { AuthProvider } from '../contexts/AuthContext'
import { CartProvider } from '../contexts/CartContext'
import { ThemeProvider } from '#material-ui/core'
import theme from '../styles/theme'
export default function App({ Component, pageProps }) {
const router = useRouter()
return(
<AnimatePresence exitBeforeEnter>
<CartProvider>
<AuthProvider>
<ThemeProvider theme={theme}>
<Header />
<motion.div key={router.pathname} className="main">
<Component { ...pageProps } />
<Footer />
</motion.div>
</ThemeProvider>
</AuthProvider>
</CartProvider>
</AnimatePresence>
)
}
Then, in any component that you want access to those contexts, you can invoke it to use the values (or helper functions):
import { Alert, Grid, TextField, Button, makeStyles, Typography } from '#material-ui/core'
import { useAuth } from '../contexts/AuthContext'
import { useState } from 'react'
const theme = makeStyles({
form: {
width: '100vw',
maxWidth: '400px',
margin: 'auto',
padding: '1rem',
'& > div': {
paddingBottom: '1rem'
}
}
})
export default function LoginForm() {
const { login } = useAuth();
const styles = theme()
const [state, setState] = useState({
email: "",
password: ""
})
const [error, setError] = useState()
const { googleLogin } = useAuth()
function handleForm(e) {
setState({
...state,
[e.target.name]: e.target.value
})
}
async function handleLogin() {
await login(state.email, state.password)
.catch(err => {
console.log(err)
setError(JSON.stringify(err))
})
}
return(
<Grid container className={styles.form} direction="column" alignContent="stretch" justify="center">
<Grid item>
<Typography variant="h3">Login</Typography>
</Grid>
<Grid item>
{error && <Alert severity="error" variant="filled" >{error}</Alert>}
<TextField fullWidth name="email" label="Email" variant="outlined" onChange={handleForm}/>
</Grid>
<Grid item>
<TextField fullWidth name="password" type="password" label="Password" variant="outlined" onChange={handleForm} />
</Grid>
<Grid item>
<Button variant="contained" color="primary"fullWidth onClick={handleLogin}>Log In</Button>
</Grid>
</Grid>
)
}
notice how I import the useAuth instance (which is just a context I've named that. You can name it whatever) in my loginForm component, and then I can destructure out the values that I've exposed: const { login } = useAuth() Something like this: const { value, helperFunction } = useAuth() - assuming you're exporting a value and a function helperFunction from your context