i get this error :
Cannot read properties of undefined (reading 'forEach')
which refers to genre context in home component :
genre.genres.forEach((element)=> {.....
the problem goes away after i refresh so many times , i guess the home component is rendered before data is fetched from the api and passed to the state .
how to fix this ?
app
import * as api from "./api"
import { useState, useEffect } from 'react';
import { createContext } from 'react';
import Home from './components/Home'
export const PopularMovies = createContext();
export const Genre = createContext();
function App() {
const [popular, setPopular] = useState([])
const [genre, setGenre] = useState([])
async function getPopular() {
const popular = await api.getPopular()
setPopular(popular.results)
}
async function getGenre() {
const genre = await api.getGenre()
setGenre(genre)
}
useEffect(() => {
getPopular()
return () => { //tried this,didnt fix it
setPopular([])
};
}, []);
useEffect(() => {
getGenre()
return () => { //tried this,didnt fix it
setGenre([])
};
}, []);
return (
<PopularMovies.Provider value={popular}>
<Genre.Provider value={genre}>
<Home key={1} />
</Genre.Provider>
</PopularMovies.Provider>
);}
export default App;
home
import React from 'react'
import { useContext } from 'react'
import { PopularMovies } from "../App.js"
import { Genre } from "../App.js"
export default function Home() {
const value = useContext(PopularMovies);
const genre = useContext(Genre);
const findGenre = () => {
genre.genres.forEach((element) => { // error starts here
...
return (
...
)}
It's better checking if your the object "genre" and the array 'genres' are not undefined before executing forEach function; like this
const findGenre = () => {
genre?.genres?.forEach((element) => { // error starts here
...
return (
...
)}
Related
I have a question about userContext in react with typescript.
First I define it in RubroContext.tsx
import { createContext, useContext } from "react";
import { RubroType1, RubroType2 } from "../Interfaces/interfaces";
export const RubroContext1 = createContext <Partial<RubroType1>>({})
export const RubroContext2 = createContext <Partial<RubroType2>>({})
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);
this is interfaces.tsx
export type RubroType1 = {
rubrosItem1 : itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro >>;
}
export type RubroType2 = {
rubrosItem2 : itemRubro;
setItemRubro2 : Dispatch<SetStateAction<itemRubro >>;
}
and this is how I implement it in the components
const CompletarRubros = (props:{setIsReg:any,email:any, clientType:any}) => {
const {rubrosItem1,setItemRubro1} = useRubroContext1 ()
const {rubrosItem2,setItemRubro2} = useRubroContext2 ()
const rubro = useRef ("first")
const radius = useRef (1)
const description = useRef ("test")
useEffect(() => {
setItemRubro1!({
rubro:rubro.current,
radius:String(radius),
description:descripcion.current,
calificacion:0,
})
}, []);
//...........
}
The problem is that the code is not updated. When I want to access rubrosItem1 in other components, the information that should have been saved in the useEffect is not there. I am doing something wrong?
for example in another component
const Test= () => {
const {rubrosItem1,setItemRubro1} = useRubroContext1 ()
useEffect(() => {
console.log(rubrosItem1.rubro)
// it does not show anything
}, []);
}
You should create a RubroContext1Provider component and declare the context value as its local state. So that the children of the RubroContext1Provider component and share the context value(stored in its state).
E.g.
RubroContext.tsx:
import {
createContext,
Dispatch,
SetStateAction,
useContext,
useState,
} from 'react';
import * as React from 'react';
type itemRubro = any;
export type RubroType1 = {
rubrosItem1: itemRubro;
setItemRubro1: Dispatch<SetStateAction<itemRubro>>;
};
export type RubroType2 = {
rubrosItem2: itemRubro;
setItemRubro2: Dispatch<SetStateAction<itemRubro>>;
};
export const RubroContext1 = createContext<Partial<RubroType1>>({});
export const RubroContext2 = createContext<Partial<RubroType2>>({});
export const useRubroContext1 = () => useContext(RubroContext1);
export const useRubroContext2 = () => useContext(RubroContext2);
export const RubroContext1Provider = ({ children }) => {
const [value, setValue] = useState();
return (
<RubroContext1.Provider
value={{
rubrosItem1: value,
setItemRubro1: setValue,
}}
>
{children}
</RubroContext1.Provider>
);
};
CompletarRubros.tsx:
import { useEffect, useRef } from 'react';
import { useRubroContext1 } from './RubroContext';
export const CompletarRubros = () => {
const { rubrosItem1, setItemRubro1 } = useRubroContext1();
const rubro = useRef('first');
const radius = useRef(1);
const description = useRef('test');
useEffect(() => {
setItemRubro1({
rubro: rubro.current,
radius: String(radius),
description: description.current,
calificacion: 0,
});
}, []);
return null;
};
Test.tsx:
import { useRubroContext1 } from './RubroContext';
export const Test = () => {
const { rubrosItem1 } = useRubroContext1();
console.log('[Test]:', rubrosItem1?.rubro);
return null;
};
App.tsx:
import * as React from 'react';
import { CompletarRubros } from './CompletarRubros';
import { RubroContext1Provider } from './RubroContext';
import './style.css';
import { Test } from './Test';
export default function App() {
return (
<div>
<RubroContext1Provider>
<CompletarRubros />
<Test />
</RubroContext1Provider>
</div>
);
}
The console logs:
[Test]:undefined
[Test]:undefined
[Test]:first
[Test]:first
stackblitz
I have the following app entry component:
React.useEffect(() => {
const fetchData = async () => {
try {
const libraries: unknown[] = await sendRequest('/libraries');
const softwareComponents: unknown[] = await sendRequest('/softwareComponents');
localStorage.setItem('libraries', JSON.stringify(arraySetup(libraries, 'libraries')));
localStorage.setItem('softwareComponents', JSON.stringify(arraySetup(softwareComponents, 'software-components')));
} catch (err) {
console.error(err);
}
};
isAuthenticated() && fetchData();
}, []);
I am fetching Arrays from two endpoints and then set the result in the Local Storage, so I can read from it in other components.
A child component is using the data like this:
const [data, setData] = React.useState<Array<any>>([]);
React.useEffect(() => {
const libraries = getLocalStorageItem('libraries');
const softwareComponents = getLocalStorageItem('softwareComponents');
const condition = libraries && softwareComponents;
if (condition) {
setData([...libraries, ...softwareComponents]);
}
}, []);
const getDataLength = (category: string) => {
return (data || []).filter((item: any) => item.category === category).length;
};
return (
<React.Fragment>
<OwcGrid item xs={12} s={4}>
<LibrariesCard numberOfElements={getDataLength('libraries')} /> // rendering here the length of the localStorage item.
</OwcGrid>
Goal/Challenge:
I want to use React.Context to remove local storage implementation but I am not sure how to keep it as simple as possible.
I only saw guides which implemented dispatch actions and so on but this seems already too complex because I only fetch the data and don't change it as I only render it.
Are there any tipps or guides how to start with this?
Possible implementation with context:
//context.tsx
import {
createContext,
ReactNode,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
export interface LibsAndComponentsInterface {
data: unknown[];
}
const LibsAndComponentsContext = createContext<
LibsAndComponentsInterface | undefined
>(undefined);
// Wrap your App component with this
export function LibsAndComponentsProvider({
children,
}: {
children: ReactNode;
}) {
const [libs, setLibs] = useState<unknown[]>([]);
const [components, setComponents] = useState<unknown[]>([]);
useEffect(() => {
const fetchData = async () => {
try {
const libraries: unknown[] = await sendRequest('/libraries');
const softwareComponents: unknown[] = await sendRequest(
'/softwareComponents'
);
setLibs(libraries);
setComponents(softwareComponents);
} catch (err) {
console.error(err);
}
};
isAuthenticated() && fetchData();
}, []);
const ctxValue = useMemo(
() => ({
data: [...libs, ...components],
}),
[libs, components]
);
return (
<LibsAndComponentsContext.Provider value={ctxValue}>
{children}
</LibsAndComponentsContext.Provider>
);
}
export function useLibsAndComponents() {
const ctx = useContext(LibsAndComponentsContext);
if (ctx == null) {
throw new Error(
'useLibsAndComponents must be inside LibsAndComponentsProvider'
);
}
return ctx;
}
// later in your components
const { data } = useLibsAndComponents()
Here is the complete setup for React Context. Please use typescript if needed.
MyContextProvider.js
const { createContext, useState } = require("react");
//Create a context
export const Mycontext = createContext();
//Created a component that helps to provide the context.
const MyContextProvider = ({ children }) => {
//Declare all the states that you need
const [libraries, setLibraries] = useState([]);
const [softwareComponents, setSoftwareComponents] = useState([]);
return (
<Mycontext.Provider
//provide all the state, function as value that you need in any child component
value={{
libraries,
setLibraries,
softwareComponents,
setSoftwareComponents
}}
>
{children}
</Mycontext.Provider>
);
};
export default MyContextProvider;
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyContextProvider from "./MyContextProvider";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
//Wrap App component By the MycontextProvider component
root.render(
<StrictMode>
<MyContextProvider>
<App />
</MyContextProvider>
</StrictMode>
);
App.js
import { useContext } from "react";
import ChildComponent from "./Child";
import { Mycontext } from "./MyContextProvider";
import "./styles.css";
export default function App() {
//This is the way of getting value from context here useContext is the builtin hook and Mycontext is the context name
const { setLibraries, setSoftwareComponents } = useContext(Mycontext);
//After getting data from API use setLibraries and setSoftwareComponents to store data in the state(context) instead of local storage.
return (
<div>
<ChildComponent />
</div>
);
}
Child.js
import { useContext } from "react";
import { Mycontext } from "./MyContextProvider";
const ChildComponent = () => {
const { libraries, softwareComponents } = useContext(Mycontext);
//Here is your state you can use it as your need.
console.log(libraries, softwareComponents);
return <h1>Child Component</h1>;
};
export default ChildComponent;
I have this problem, can anyone help me?
TypeError: customers.map is not a function.
I've always used it that way and I've never had any problems.
Its about data integration.
Basically is that, please anyone can help me?
import React, { useState, useEffect } from "react";
import { List, Card } from "antd";
import { data } from "../../../mocks/customers";
import { DeleteCustomerButton } from "#components/atoms/DeleteCustomerButton";
import { CustomersEditButton } from "#components/atoms/CustomersEditButton";
import { useContext } from "../../../contexts/context";
const { Meta } = Card;
const CustomersCardList: React.FC = () => {
const customers: any = useContext();
return (
<div>
{customers.map((customer, key) => { })}</div>)
}
//context.tsx
import * as React from 'react';
import axios from 'axios';
export const AccountContext = React.createContext({});
export const useContext = () => React.useContext(AccountContext);
interface AccounterContextProviderProps {
value: any
};
export const AccounterContextProvider: React.FC<AccounterContextProviderProps> = ({ children, value }) => {
const [customers, setCustomers] = React.useState<any>([]);
React.useEffect(() => {
const getCustomers = async () => {
const result = await axios.get("http://localhost:3333/customers");
setCustomers(result.data);
}
getCustomers();
}, []);
console.log(customers);
return (
<AccountContext.Provider value={{ ...value, customers }}>
{children}
</AccountContext.Provider>
)
};
Any can be anything not only array, so it will not have a map method. Use const customers:any[] = useContext() instead
I'm trying to use the useSnack hook from notistack library but I keep getting this error
TypeError: Cannot destructure property 'enqueueSnackbar' of 'Object(...)(...)' as it is undefined.
Here is the code:
import React, { useContext, useEffect } from "react";
import AlertContext from "../context/alert/alertContext";
import { SnackbarProvider, useSnackbar } from "notistack";
const Alerts = (props) => {
const alertContext = useContext(AlertContext);
// This line below is where the error seems to be
const { enqueueSnackbar } = useSnackbar();
useEffect(() => {
alertContext.msg !== "" &&
enqueueSnackbar(alertContext.msg, {
variant: alertContext.type,
});
}, [alertContext]);
return <SnackbarProvider maxSnack={4}>{props.children}</SnackbarProvider>;
};
export default Alerts;
useSnackbar hook accessible anywhere down the tree from SnackbarProvider.
So you cannot use it in the same component as SnackbarProvier.
import AlertContext from "../context/alert/alertContext";
import { SnackbarProvider } from "notistack";
const Alerts = (props) => {
const alertContext = useContext(AlertContext);
const providerRef = React.useRef();
useEffect(() => {
alertContext.msg !== "" &&
providerRef.current.enqueueSnackbar(alertContext.msg, {
variant: alertContext.type,
});
}, [alertContext]);
return <SnackbarProvider ref={providerRef} maxSnack={4}>
{props.children}
</SnackbarProvider>;
};
export default Alerts;
Wrap you index file with SnapBar provider:
index.js
import { SnackbarProvider } from "notistack";
const Index = () => (
<SnackbarProvider maxSnack={1} preventDuplicate>
index
</SnackbarProvider>
)
export default Index
jsx file
import { useSnackbar } from "notistack";
const Logs = () => {
const { enqueueSnackbar } = useSnackbar();
const handler = () => {
enqueueSnackbar(`Successful.`, { variant: "success" });
};
return <span onClick={handler}>"Logs loading"</span>;
};
export default Logs;
I have the following custom hook called useFlash:
import { useState } from 'react';
export default function useFlash() {
const [messages, setMessages] = useState([]);
const showFlash = (message: string) => {
setMessages([...messages, message]);
};
const clearMessage = (index: number) => {
setMessages(messages.filter((_m, i) => index !== i));
};
return {
messages,
showFlash,
clearMessage
};
}
Then I have this HOC providing it to two other components:
import React from 'react';
import useFlash from '../effects/useFlash';
const withFlash = (WrappedComponent: React.Component) => {
const WithFlash = () => {
const { messages, showFlash, clearMessage } = useFlash();
return (
<WrappedComponent
messages={messages}
showFlash={showFlash}
clearFlashMessage={clearMessage}
/>
);
};
return WithFlash;
};
export default withFlash;
It works well, except each use of the HOC gets its own state data. I need the state to be global. I know I can use contexts with consumer/providers, but I thought this way would be a little simpler. It is not proving to be true, is there a way to make this global?
You'll need to use Context, but it's not that bad..
create your context..
import React, { useState } from 'react';
export const FlashContext = React.createContext();
export const FlashProvider = ({ children }) => {
const [messages, setMessages] = useState([]);
return (
<FlashContext.Provider value={{ messages, setMessages }}>
{children}
</FlashContext.Provider>
);
};
wrap your components in the provider somewhere higher in the tree..
import React from "react";
import { FlashProvider } from "./flash-context";
const App = () => <FlashProvider><TheRest /></FlashProvider>;
export default App;
then use the context in your custom hook..
import React, { useContext } from "react";
import { FlashContext } from "./flash-context";
export default function useFlash() {
const { messages, setMessages } = useContext(FlashContext);
const showFlash = (message) => {
setMessages([...messages, message]);
};
const clearMessage = (index) => {
setMessages(messages.filter((_m, i) => index !== i));
};
return {
messages,
showFlash,
clearMessage
};
}