src/contexts/user.js
import { createContext, useState } from "react";
export const UserContext= createContext();
export const UserContextProvider= (props)=>{
const [user, setUser] = useState(null);
//const [name, setName] = useState(null);
return (
<UserContext.Provider value={{user: [user, setUser] }}>
{props.children}
</UserContext.Provider>
)
};
src/components/signin-btn/index.js
import React, {useContext} from 'react';
import "./style.css"
import { UserContext } from '../../contexts/user';
import { signInWithGoogle } from '../../services/auth';
import "./style.css";
export default function SignInBtn() {
//const [user, setuser] = useState(SignInBtn) {
const[user,setUser] = useContext(UserContext).user;
const signInBtnClick = async() => {
let userBySignIn = await signInWithGoogle();
if(userBySignIn) setUser(userBySignIn);
};
return (
<div className="signInBtn">
<p>Sign in with Google</p>
</div>
);
}
src/App.js
import React from 'react';
import './App.css';
import {Home} from './pages';
function App() {
return (
<UserContextProvider>
<div className="App">
<Home />
</div>
</UserContextProvider>
);
}
export default App;
Error Failed to compile. src\App.js Line 8:6: 'UserContextProvider' is not defined react/jsx-no-undef
Am I missing something?
App.js is missing the following line:
import { UserContextProvider } from './contexts/user';
Related
Can someone tell me if there is anything wrong with the way I have used the Context API in this code. And if there is something wrong can you explain why?
These two are my Contexts
import React from "react";
export const ItemListContext = React.createContext();
import React from "react";
export const ItemContext = React.createContext();
This is my App component
import "./styles.css";
import TodoList from "./Components/TodoList";
import { ItemContext } from "./Context/ItemContext";
import { ItemListContext } from "./Context/ItemListContext";
import { useState } from "react";
export default function App() {
const [inputs, setInput] = useState("");
const [itemList, setItemList] = useState([]);
return (
<div className="App">
<ItemContext.Provider value={[inputs, setInput]}>
<ItemListContext.Provider value={[itemList, setItemList]}>
<TodoList />
</ItemListContext.Provider>
</ItemContext.Provider>
</div>
);
}
After this I have a Todo List component that looks like this :-
import React, { useContext, useState } from "react";
import { ItemContext } from "../Context/ItemContext";
import { ItemListContext } from "../Context/ItemListContext";
const TodoList = () => {
const [input, setInput] = useContext(ItemContext);
const [itemList, setItemList] = useContext(ItemListContext);
const handleChange = (e) => {
setInput(e.target.value);
};
const hanleCLick = () => {
setItemList((prevList) => [...prevList, input]);
};
const handleDelete = (i) => {
let newList = itemList.filter((item, index) => index !== i);
setItemList(newList);
};
return (
<>
<input type="text" value={input} onChange={handleChange} />
<button onClick={hanleCLick}>Add Item</button>
{itemList.map((item, index) => {
return (
<div key={index}>
<p>{item}</p>
<button onClick={() => handleDelete(index)}>Delete</button>
</div>
);
})}
</>
);
};
export default TodoList;
Showing white blank screen with the use of context api in React js
I'm running my code which has no errors, but when I take a trip to localhost:3000
I get a blank screen.
These are the React js files in the project, If I don't use the Context-API, coding is doing great.
App.js
import "./App.css";
import { UserContextProvider } from "./contexts/user";
import { Home } from "./pages";
function App() {
return (
<div className="app">
<UserContextProvider>
<Home />
</UserContextProvider>
</div>
);
}
export default App;
user.js
import { createContext, useState } from "react";
export const UserContext = createContext();
export const UserContextProvider = (props) => {
const [user, setUser] = useState(null); // user value can be used anywhere
return (
<UserContext.Provider value={{user: [user,setUser]}}>
{props.childern}
</UserContext.Provider>
);
};
SignInBtn.js
import React,{useContext} from "react";
import "./style.css";
import GoogleIcon from "#mui/icons-material/Google";
import { signInWithGoogle } from "../../services/auth";
import { UserContext } from "../../contexts/user";
const icon = {
fontSize: 14,
};
function SignInBtn() {
const [user, setUser] = useContext(UserContext).user;
const signInBtnClick = async () =>{
let userBySignIn = await signInWithGoogle()
if(userBySignIn) setUser(userBySignIn)
}
return (
<div className="signInBtn" onClick={signInBtnClick}>
<div className="btn">
<p>Signin with </p>
<GoogleIcon style={icon}/>
</div>
</div>
);
}
export default SignInBtn;
first of everything make sure your SignInBtn Component is children of Context Provider
secondly
Remove the .user from here
const [user, setUser] = useContext(UserContext).user; in SignInBtn.js Where you are taking value from UserContext.
You can do this way
const {user} = useContext(UserContext);
const [user, setUser] = user
Solution <>{props.children}</>
You should enclose {props.childern} in Fragments. or any other tags that do not return null in any case.
Refer to this. https://codesandbox.io/s/divine-shape-6rxws?file=/src/user.js:331-353 for the exact solution
you should import React in user.js
it will work
I am using the following Languageselector in my next project:
import React, { useState } from 'react'
import i18n from '../src/services/i18n'
import Link from 'next/link'
import { useRouter } from 'next/router'
const LanguageSelector = (props) => {
const [language, setLanguage] = useState(i18n.language);
const router = useRouter()
const handleOnclick = (value) => {
router.push(router.asPath, router.asPath, { locale: value });
};
console.log(router);
return (
<>
<div className={props.className!==undefined&&props.className!==""? ('d-inline-block d-xl-none '+props.className):"d-inline-block d-xl-none "} >
<select onChange={(e)=>{handleOnclick(e.target.value)}} required defaultValue={router.locale}>
<option value='de'>Deutsch</option>
<option value='en'>Enligsh</option>
</select>
</div>
<div className="d-none d-xl-block">
{router.locale==="en"? <div><Link href={router.asPath} locale='de'>DE</Link></div> : <div>DE</div>}
<p>|</p>
{router.locale==="de"? <div><Link href={router.asPath} locale='en'>EN</Link></div> : <div>EN</div>}
</div>
</>
)
}
export default LanguageSelector
_app.js
This does work fine until the visitor is on an URL, that has a # parameter. The URL in browser bar still changes but the language stays the same. How can I change the language on URLs with hash?
EDIT: This is how I am using translation
import Layout from '../components/Layout'
import { appWithTranslation } from 'next-i18next';
import React, {useState, useEffect} from 'react';
import { useRouter } from 'next/router'
const app = ({Component, pageProps })=> {
const router = useRouter()
function updateSchnellzugriffe(value, mobileValue){
setSchnellzugriffe(value);
setMobileSchnellzugriffe(mobileValue);
}
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default appWithTranslation(app)
And this is an example of pageComponent
import React, {useEffect, useState} from 'react'
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const home = (props) => {
const { t } = useTranslation(['common','home']);
return (
<h1 >{t("home:headline")}</h1>
)
};
export async function getStaticProps({ locale }){
return {
props: {
...await serverSideTranslations(locale, ['common','home']),
},
}
}
export default home
Why is useContext undefined?
Context
import React from 'react'
const PathContext = React.createContext()
export default PathContext
from a jsx file
import PathContext from '../../../contexts/pathContext';
.......
<PathContext.Provider
value={{
paths,
pathChecks
}}
>
<MyComponent />
</PathContext.Provider>
In MyComponent.jsx render function..
import PathContext from 'path/to/file';
import {useContext} from 'react';
const {
paths,
pathChecks
} = useContext(PathContext);
UNDEFINED!
What is my context undefined?
Use it like so:
App.js (or Main Component)
// App.js
import React from "react";
import MyContext from "./PathContext";
import MyComponent from "./MyComponent";
export default function App() {
return (
<div className="App">
<MyContext>
<MyComponent />
</MyContext>
</div>
);
}
PathContext.js
// PathContext.js
import React, { createContext } from "react";
export const PathContext = createContext(); // regular export
// A new component that will hold the context values and will wrap your <MyComponent>
const MyContext = ({ children }) => {
const paths = "define your paths";
const pathChecks = "define your pathChecks";
return (
<PathContext.Provider
value={{
paths,
pathChecks
}}
>
{children} // Pass children props
</PathContext.Provider>
);
};
export default MyContext; // default export MyContext component
MyComponent.js (context consumer)
// MyComponent.js
import React, { useContext } from "react";
import { PathContext } from "./PathContext";
const MyComponent = () => {
const { paths, pathChecks } = useContext(PathContext);
return (
<div>
<div>{paths} value</div>
<div>{pathChecks} value</div>
</div>
);
};
export default MyComponent;
Here is a sandbox example.
I think you need to use {useContext} from 'react' instead of {useContext} from React
Please check this example. It is working fine.
import React, {useContext, useEffect, useReducer, useState} from 'react';
import PathContext from "./PathContext";
function PathContextExample() {
const paths = 'this is path';
const pathChecks = 'this is path checks';
return (
<div>
<PathContext.Provider
value={{
paths,
pathChecks
}}
>
<MyComponent/>
</PathContext.Provider>
</div>
)
}
export default PathContextExample;
function MyComponent() {
const {
paths,
pathChecks
} = useContext(PathContext);
return (
<div>
{paths}
<br/>
{pathChecks}
</div>
)
}
In MyComponent.jsx file you should import PathContext
I'm trying to reach a value using React Hook useContext, but keep getting the following error:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
CartContext.js
import React, {useState, createContext} from 'react';
export const CartContext = createContext();
export const CartProvider = (props) => {
const [cart, setCart] = useState([]);
return (
<CartContext.Provider value={[cart, setCart]}>
{props.children}
</CartContext.Provider>
)
}
And im trying to reach it from Cart.js
import React, {useContext} from 'react'
import {CartContext} from '../../pages/contact/CartContext';
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'
export default function Cart() {
const [cart, setCart] = useContext(CartContext); //This line causes the error
return (
<div>
<Menu right width={350}
isOpen={false}
id={"testi"} className={ "my-menu" }
customBurgerIcon={<i className="fa fa-shopping-cart" aria-hidden="true"/>}
burgerButtonClassName={ "cartButton" }>
<h1>Hello</h1>
</Menu>
</div>
)
}
It seems alright. See this CodeSandbox:
https://codesandbox.io/s/eager-brattain-2zhxj
index.js
import React from "react";
import ReactDOM from "react-dom";
import Cart from "./Cart";
import { CartProvider } from "./CartContext";
import "./styles.css";
function App() {
return (
<CartProvider>
<Cart />
</CartProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CartContext.js
import React, { useState, createContext } from "react";
export const CartContext = createContext();
export const CartProvider = props => {
const [cart, setCart] = useState(["a", "b"]);
return (
<CartContext.Provider value={[cart, setCart]}>
{props.children}
</CartContext.Provider>
);
};
Cart.js
import React, { useContext } from "react";
import { CartContext } from "./CartContext";
function Cart() {
const [cart, setCart] = useContext(CartContext);
function updateCart() {
setCart(prevState => {
const newState = Array.from(prevState);
newState.push("c");
return newState;
});
}
return (
<React.Fragment>
<div>I am Cart</div>
<div>Cart value: {JSON.stringify(cart)}</div>
<button onClick={updateCart}>Add 'c' to cart</button>
</React.Fragment>
);
}
export default Cart;