I have an auth context component where I'm wrapping my main app component, but at the same time I'm also trying to do page specific layout component per Next.js documentation here: https://nextjs.org/docs/basic-features/layouts#per-page-layouts
Am I doing this correctly, because I can't seem to be getting the data from my Context provider.
/context/AuthContext.js
const UserContext = createContext({});
export default function AuthContext({children}) {
// .. code
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
export const useUser = () => useContext(UserContext);
/_app.js
function MyApp({ Component, pageProps }) {
const getLayout = Component.getLayout || ((page) => page);
return getLayout(
<div>
<AuthContext>
<Component {...pageProps} />
</AuthContext>
</div>
);
}
export default MyApp;
/components/Project/List.js
import { useUser } from "../../context/AuthContext";
const ProjectList = () => {
const { user } = useUser();
console.log("get user data", user);
return (
<>
test
</>
);
};
export default ProjectList;
I'm trying to console log the user, but it's giving me undefined. I'm thinking it's because the way it's wrapped as a layout component? I could be doing this wrong. But I did console log inside my AuthContext for user, and the information there is correct.
/pages/projects/index.js
const Projects = () => {
// code goes here
return (
<div>
code goes here
</div>
)
}
export default Projects;
Projects.getLayout = function getLayout(page) {
return <ProjectLayout>{page}</ProjectLayout>;
};
When I remove the Projects.getLayout block of code, the data comes back, but when I add this code, data is gone.
/components/Project/Layout.js
const ProjectLayout = ({children}) => {
return (
<>
<ProjectList />
{children}
</>
}
export default ProjectLayout
With your current structure ProjectLayout isn't getting wrapped by the AuthContext, meaning you won't have access to its context.
You can modify your _app's structure and move the getLayout call around so that the context wraps it properly.
function MyApp({ Component, pageProps }) {
const getLayout = Component.getLayout || ((page) => page);
return (
<AuthContext>
{getLayout(<Component {...pageProps} />)}
</AuthContext>
);
}
Note that calling getLayout inside the Context could lead to errors if the getLayout function uses hooks or stuff that depends on a parent element.
It will be calling getLayout first and then the context, so the value of it will be initially the default (fallback) value (it's like doing foo(bar()) and expecting that foo will be called before bar).
To avoid this, return directly the component (using getLayout as a function that generates a component):
// /pages/projects/index.js
Projects.getLayout = (children) => (
// can't use hooks here, return the component immediately
<ProjectLayout>{children}</ProjectLayout>;
);
or use the layout as a component:
// /pages/projects/index.js
Projects.Layout = ({ children }) => {
return <ProjectLayout>{children}</ProjectLayout>;
};
// /pages/_app.js
export default function App({ Component, pageProps }) {
const Layout = Component.Layout || (({ children }) => children);
return (
<AuthContext>
<Layout>
<Component {...pageProps} />
</Layout>
</AuthContext>
);
}
Edit: The difference is more visible without JSX
// incorrect
return React.createElement(AuthContext, null,
// getLayout is called before AuthContext
getLayout(
React.createElement(Component, pageProps)
)
)
// correct
return React.createElement(AuthContext, null,
// Layout is called after AuthContext
React.createElement(Layout, null,
React.createElement(Component, pageProps)
)
)
Related
I would like to ask how can I send state from component to another component?
I have 3 components and I want to send data between them. So I have an input component where I handle an IP call and I want to send this shortedLink state to another component, so I can render that data. I don't know that is it clear what I want to do, but I hope so :D
import ShortedLinks from './ShortedLinks'
const testimonials = () => {
return (
<div>
<ShortedLinks />
</div>
);
};
export default testimonials;
const shortedLinks = () => {
return (
<div>
<h1>I want to get the state here</h1>
</div>
);
};
export default shortedLinks;
const InputSection = () => {
const [shortedLink, setShortedLink] = useState("")
return (...);
};
export default InputSection;
You can use the props to achieve it like this :
import ShortedLinks from './ShortedLinks'
const Testimonials = () => {
const [shortedLink, setShortedLink] = useState("")
return (
<div>
<ShortedLinks shortedLink={shortedLink} /> // Pass props here
</div>
);
};
export default Testimonials;
And then in your ShortedLinks component
const ShortedLinks = ({shortedLink}) => { // Get props here
return (
<div>
<h1>{shortedLink}</h1>
</div>
);
};
export default ShortedLinks;
And if you can't use the props like this you can use the useContext like this :
import React,{ useState, createContext } from "react";
export const ShortedLinkContext = createContext('');
const InputSection = () => {
const [shortedLink, setShortedLink] = useState("")
return (
<ShortedLinkContext.Provider value={shortedLink}>
....
</ShortedLinkContext.Provider>
);
};
export default InputSection;
And finally you can comsume the context here :
import {ShortedLinkContext} from ....
const ShortedLinks = () => {
const shortedLink = useContext(ShortedLinkContext);
return (
<div>
<h1>{shortedLink}</h1>
</div>
);
};
export default shortedLinks;
Enjoy :)
I tried to pass description=Button props to Button Component using HOC.
so that, I expected to render like, `Button
But, Empty Button Elements is Rendered!
My codeSandBoxLink:enter link description here
Button.jsx
import React from 'react'
import withLoading from './withLoading'
function Button() {
return <button></button>
}
export default withLoading(Button)
withLoading.jsx
export default function withLoading(Component) {
const WithLoadingComponent = (props) => {
return <Component>{props.description}</Component>
);
};
return WithLoadingComponent;
App.jsx
return(
<div>
<Button description="button"><Button>
</div>
)
Thanks for any help.
At Button compnent, you need to use props and follow your code so that is props.description.
function Button(props) {
return <button>{props.description}</button>;
}
At withLoading HOC, you need to pass all props for Component.
//HOC Example
export default function withLoading(Component) {
const WithLoadingComponent = (props) => {
const [loading, setLoading] = React.useState(true);
console.log("props:", props.description);
//delay 3sec...
React.useEffect(() => {
const timer = setTimeout(() => {
setLoading(false);
}, 3000);
return () => clearTimeout(timer);
}, []);
return loading ? <p>loading...</p> : <Component {...props} />;
};
return WithLoadingComponent;
}
I have been fork and then fixed it. You can refer by this link: https://codesandbox.io/s/strange-cerf-glxquu?file=/src/withLoading.jsx
I show a cool feature of react where Component state can be used from where it's body where it's being used.
Here is an example from firebase Link
<FirebaseDatabaseNode
path="user_bookmarks/"
limitToFirst={this.state.limit}
orderByValue={"created_on"}
>
{d =>
return (
<React.Fragment>
<pre>Path {d.path}</pre>
</React.Fragment>
);
}}
</FirebaseDatabaseNode>
In this example FirebaseDatabaseNode is Component and we're accessing d inside it.
I want to implement similar so I could access data of component in similar way. Here is my attempt to implement similar state access for Dashboard Component.
export default function Dashboard({
children,
user
}: {
children: ReactNode;
user: any
}) {
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedMenu, setSelectedMenu] = React.useState(LinkItems[DEFAULT_SELECTED_ITEM])
//...
}
And I want to access selectedMenu inside of Dashboard in index.js
export default function () {
return (
<Dashboard user={user}>
{selectedMenu => {
return (
<div>{selectedMenu}</div>
)
}
}
</Dashboard>
)
}
But this is not working in my case and I don't know the exact terminology.
Finally while I explore the firebase source I found out that they are using render-and-add-props Library.
Dashboard.js
import { renderAndAddProps } from 'render-and-add-props';
//...
export default function Dashboard({
children,
user
}: {
children: ReactNode;
user: any
}) {
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedMenu, setSelectedMenu] = React.useState(LinkItems[DEFAULT_SELECTED_ITEM])
//...
return (
<div>
//...
// for rendering element with props
{renderAndAddProps(children, { 'selectedMenu': selectedMenu })}
</div>
)
}
//in index
export default function () {
return (
<Dashboard user={user}>
{({selectedMenu}) => { // {({ selectedMenu }: { selectedMenu: LinkItemProps }) if you're using typescript.
return (
<div>{selectedMenu}</div>
)
}
}
</Dashboard>
)
}
First I created a .js file and created context.
In app.js
export default function App({ navigation }) {
const [ItemURL,setItemURL] = useState('URL')
return (
<ItemContext.Provider value={ItemURL}>
...
</ItemContext.Provider>
)
}
now I want to pass my setItemURL to my child component
So I tried.
export default const ItemsComponent = (props) => {
const [URL, setURL] = useContext(ItemContext)
return(
<TouchableWithoutFeedback
onPress={() => {
setURL(props.Json.Image)
}}
/>
)
}
but its not working and saying setURL is not a function(in setURL(props.Json.Image)) ,setURL is 'R'
You should actually pass the setURL function in the context value as well.
export default function App({ navigation }) {
const [ItemURL, setItemURL] = useState('URL');
const value = [ItemURL, setItemURL];
return (
<ItemContext.Provider value={value}>
...
</ItemContext.Provider>
)
}
I want to access the state from one component to another. To do so i want to wrap contextprovider only to the component where state changes on clicking a button and return state from a usehook so that another component can access the state.
below is how the componnet looks without context applied,
function Parent () {
return (
<UploadButton/>
);
}
function UploadButton () { //this is where state is set
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
const handleClick = () => {
setIsDialogOpen(!isDialogOpen);
}
return (
<>
<Button onClick={handleClick}/>
{isDialogOpen && <Upload/>}
</>
);
}
function UserButton() { //this is where state is accessed
return (
//this icon should be displayed only if !isDialogOpen
);
}
With context looks like below, I have DialogContext within same file where UploadButton is.
function Parent() {
return (
<DialogContextProvider>
<UploadButton/>
</DialogContextProvider>
);
}
interface DialogCtxState {
isDialogOpen: boolean;
setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const initialDialogState: DialogCtxState = {
isDialogOpen: false,
setIsDialogOpen: () => {},
};
const DialogContext = React.createContext<DialogCtxState>(
initialDialogState
);
export const DialogContextProvider: React.FC = ({ children }) => {
const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false);
return (
<DialogContext.Provider
value={{
isDialogOpen,
setIsDialogOpen,
}}
>
{children}
</DialogContext.Provider>
);
}
export function useDialogOpen() { //this is defined in uploadbutton component file
const {isDialogOpen} = React.useContext(DialogContext);
return isDialogOpen;//this is false althought upload button is clicked.
}
function UploadButton () {
const {isDialogOpen, setIsDialogOpen} = React.useContext(DialogContext);
const handleClick = () => {
setIsDialogOpen(isDialogOpen => !isDialogOpen);
}
return (
<>
<Button onClick={handleClick}/>
{isDialogOpen && <Upload/>}
</>
);
}
I access the state isDialogOpen in userbutton component like below,
function UserButton () {
const isDialogOpen = useDialogOpen();
return (
{!isDialogOpen && <Icon/>} //here isDialogOpen is false although when button in upload button
//is clicked and hence makes Icon render.
);
}
I am not sure how to fix this. could someone help me with this. thanks.
);
If that isDialogOpen state is needed only for the child's parent component, Why should you use context ?
( Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. )
You can simply pass isDialogOpen state to parent using a parent's callback function as prop ref to be called inside the child.
I think this is the solution. React Hooks - How to pass props from child to parent component