I have the following Component in my NextJs app
const Input = React.forwardRef((props, ref) => <input {...props} />)
All I keep getting as error is
Component definition is missing display nameeslintreact/display-name
What is possibly the reason?
You are using anonymous arrow function to create the component. If you use a regular function you won't get that error.
const Input = React.forwardRef(function Input(props, ref) { return <input {...props} />})
Or you can just add displayName to Input const
Input.displayName = 'Input'
Related
after searching half a day I still not able to getItem from local storage.
the idea is to save some data to local storage and based on that I want to route a user in the Layout component. I am able to save to local storage and delete but not able to get data from it. I get error 'local storage not defined' or 'destroy is not a function'
I have 3 components save, delete and get. save and delete I execute after a client side api call, the get function I need to be working in the Layout as it is the top level for all routes.
I Need a bit help to the right direction please.
---Upadte
I found something that works
export const IsAuth = ()=>{
const [auth, setAuth] = useState();
useEffect(()=>{
if(typeof windows === undefined) return;
const item = localStorage.getItem('ltu');
setAuth(!!item);
},[]);
return auth;
}
now my problem is I have not much understanding of nextjs. I used the Layout to create a theme template, I basically have only 3 pages that can be visited if not logged in and the rest one needs to be logged in. I get so many examples but it seems like I need to verify auth on every single page instead of being able to do this on root/layout level.
all examples I get are without the use of Layout and I am totally stuck.
I want a simple login system just with jwt and check if thats there to show pages.
I could not get the localStorage.getItem() to work in the layout template.
My solution while maybe not perfect is.
in the _app.js I create useState() and pass those along to the menu trough the Layout, in in the menu useEffect() with 'use client' in the useEffect I set the state I need global.
_app.js
export default function App({ Component, pageProps }){
const [isAuth, setAuth] = useState()
const [user, setUser] = useState()
return (
<Layout setAuth={setAuth} isAuth={isAuth} user={user} setUser={setUser}>
<Component user={user} setUser={setUser} isAuth={isAuth} {...pageProps} />
</Layout>
)
}
Layout.js
export default function Layout({ children, setAuth, isAuth, user, setUser }) {
return (
<>
<Headd />
<SideMenu setAuth={setAuth} isAuth={isAuth} user={user} setUser={setUser}/>
<main>
<div className="menu-spacer"></div>
<content>
{children}
</content>
</main>
</>
)
}
menu.js
'use client';
const SideMenu = ({setAuth, isAuth, user, setUser}) => {
useEffect(()=>{
if(typeof windows === undefined) return;
const item = localStorage.getItem('ltu');
setAuth(!!item);
if(item) setUser(JSON.parse(localStorage.getItem('Ud')))
}, [router, router.isReady])
}
Now I can use the {isAuth, user,} on any page and component.
I am pretty sure this is not the right solution, but I could not find any other working solution and no one here yet posted a answer.
Can someone please help me understand dynamic refs in Vue3? I have a group of radio buttons and trying to return the value of the selected button. In the code below the same value is returned regardless of which button I click.
<script setup>
const props = defineProps({
mealServices: Array,
});
const activeMealService = ref([])
const setActiveMealService = () => {
console.log('meal id is ' + activeMealService)
};
</script>
<div v-for="mealService in mealServices" :key="mealService.id">
<input :ref="(el) => {activeMealService = mealService.meal_type_id}"
#click="setActiveMealService" type="radio" name="meal_type"
:id="mealService.meal_type_id"
:value="mealService.meal_type_id"
v-model="form.meal_type_id"/>
<label :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</
</div>
:ref="(el) => {activeMealService = mealService.meal_type_id}" is called for every iteration, right?
I guess you're resetting the active meal in every render to the last meal.
You don't need a Template ref to get the current selected meal.
Try removing this line
I try to make test SSR app based on Next.js + React + Apollo.
But I cannot understand how SSR works.
I read the docs and I found that to get some important data while first SSR render we need use getStaticProps and the result of function call will be passed to the props of component which I try to render.
Depends on this props I can render whatever I want, for example I have next code:
import React from "react";
import {GetServerSideProps, GetStaticProps} from "next";
const Home = (props) => {
return (
<div>{props.ValFromGetStaticProps}</div>
)
};
export const getStaticProps: GetStaticProps = async (context) => {
return { props: {ValFromGetStaticProps: 'ValFromGetStaticProps!'} }
};
export default Home;
I expect to see rendered this code on the server side, and if I open sources of the HTML I should see this div. But instead I see just some props object... And there is no div ((
Remark: in the DOM this div present, but for SEO purpose this div should exists in the page source.
Ohh... I didn't see it because I blocked first render early in the parent component:
_app.tsx
export default function ({ Component, pageProps }) {
<BackendDataProvider>
<Component {...pageProps}>
</BackendDataProvider>
}
in the BackendDataProvider was condition
const {data, error, loading} = useQuery(BACKEND_QUERY)
if (error || loading) {
return null;
}
so that was a reason why first render was not rendered correctly
Background
I'm trying to build an app which shows a number of stores, in the home screen which is a function component (mind this as I need to use hooks) I have a scroll view which shows different stores.
What I need
When the user presses on one of the stores it should redirect it to a screen which has the information of that specific store. I have built the "store detail" screen but with static info, I want to replace all of that information with data stored in a firestore collection.
Question
How would one go about retrieving data from a Firestore collection in react native, then assigning the data from each document to a separate Touchable Opacity (I know about passing params with react navigation, I just don't know which param to pass when working with Firestore), and then displaying that data in the store detail screen?
Sample code for context
App.js
<NavigationContainer>
<Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}>
<Stack.Screen name="Home"options={{headerShown: false}}>
{props => <HomeScreen {...props} extraData={user} />}
</Stack.Screen>
<Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/>
<Stack.Screen name="Registration" component={RegistrationScreen} options={{headerShown: false}}/>
<Stack.Screen name="storeDetail" options={{title: ''}}>
{props => <storeDetail {...props} extraData={} />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
In this file you'll see that I've already called some data (Login and Register pass userData to the Home Screen), however in order to implement that method I depended on the response from the authentication method I was using. I imagine although, I will probably need to pass something as extraData, I understand what I should do, I just don't know how to fill the blank spaces.
Thanks a lot in advance!
First, install the Firebase SDK in your app, so you can make queries to your backend.
I don't know if your sample App.js represents the current state of progress on your app, but I'm going to assume that:
you already have your storeDetail screen built
you know the store's id before navigating to the screen (eg in the HomeScreen)
you pass the storeId as a navigation param when navigating to storeDetail
So in storeSetails screen, you can query Firestore when receiving storeId, and save the result to a state variable on success:
const StoreDetailsScreen = ({ route }) => { // route is passed as a prop by React Navigation
const { storeId } = route.params
const [store, setStore] = useState()
const [loading, setLoading] = useState(true) // show a loading spinner instead of store data until it's available
useEffect(() => {
const fetchQuery = async () => {
const storeData = await firestore()
.collection('stores')
.doc(storeId)
.get() // this queries the database
if (storeData) {
setStore(storeData) // save the data to store state
setLoading(false) // set loading to false
} else {
// something went wrong, show an error message or something
}
}
fetchQuery()
}, [storeId])
if (loading) {
return (
<ActivityIndicator/>
)
}
return (
// ... store details
)
}
Then you can use the data in store to render stuff in your screen
<Text>{store.name}</Text>
<Text>{store.email}</Text>
// ...
More info about how to use Firestore in RN: https://rnfirebase.io/firestore/usage
I'm trying to write a simple unit test to make sure if the form inside a react component dispatches the expected action on submit.
Code:
Form submit action inside the component which I'm trying to test:
<form onSubmit={(values, dispatch) => {
store.dispatch(doSomething());
handleSubmit(values, dispatch);
}}>
Test:
test('Test', (t) => {
const TestForm = TestForm();//redux form
const dispatchSpy = sinon.spy();
const props = Object.assign({}, baseProps, {
handleSubmit: (callback) => {
callback({}, dispatchSpy);
},
});
t.context.form = mount(<Provider store={store}><TestForm /></Provider>);
t.context.form.find('form').simulate('submit');
//TODO - assert
The problem here is I get the following error and I'm not able to figure out the issue:
TypeError: callback is not a function
Any thoughts on this? Thanks.
Are you sure you want to test form dispatches the expected action on submit ? I feel like it's just rewriting the internal test of redux-form (which is already tested here :
https://github.com/erikras/redux-form/blob/master/src/tests/Form.spec.js#L131-L-165 )