I’m trying to conditionally render category data from a context in a Picker.Item
component, but it isn’t working. I’ve confirmed that categories.data contains nested object data, but when I try to iterate over it as a child of the Picker
component, I receive the following error:
<code>No overload matches this call.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'false | Element | { const: any; } | undefined' is not assignable to type 'ReactNode'.
Object literal may only specify known properties, and 'const' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'void' is not assignable to type 'ReactNode'.
</code>
<code>No overload matches this call.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'false | Element | { const: any; } | undefined' is not assignable to type 'ReactNode'.
Object literal may only specify known properties, and 'const' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'void' is not assignable to type 'ReactNode'.
</code>
No overload matches this call.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'false | Element | { const: any; } | undefined' is not assignable to type 'ReactNode'.
Object literal may only specify known properties, and 'const' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.
Overload 2 of 2, '(props: PickerProps<string>, context: any): Picker<string>', gave the following error.
Type 'void' is not assignable to type 'ReactNode'.
I’ve tried several iteration methods, but the error persists.
Here’s the component I’m working on:
<code>import React, { useEffect, useState, useContext } from 'react';
import { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import tw from 'twrnc';
import { ScreenContext } from '@/context/screenContext';
import { CategoryContext } from '@/context/categoriesContext';
import { loadedScreenSize } from '@/functions/main';
interface CategoriesState {
loading: boolean;
error?: any;
data?: object;
}
export default function Header() {
const [screens, setScreen] = useState<{ [key: string]: any }>({});
const [formData, setFormData] = useState({ category: '', search: '' });
const [toggleMenu, setToggleMenu] = useState(false);
const [categories, setCategories] = useState<CategoriesState>({
loading: true,
data: {
'0': { category_id: 0, category_name: 'loading', category_slug: 'loading' }
},
});
const screenX = useContext(ScreenContext);
const categoryX = useContext(CategoryContext);
useEffect(() => {
if (!screenX) {
setScreen({ ...loadedScreenSize });
} else {
setScreen({ ...screenX.screens });
}
}, [screenX]);
useEffect(() => {
if (categoryX) {
if (categoryX.categories.response) {
setCategories({
loading: categoryX.categories.loading,
error: categoryX.categories.error,
data: categoryX.categories.response,
});
}
}
}, [categoryX]);
const toggleMenuV = () => {
setToggleMenu(!toggleMenu);
};
const searchProducts = () => {
console.log('Form submitted with data:', formData);
setFormData({ category: '', search: '' });
};
return (
<View style={tw.style([
`mb-1`,
(screens.xsScreen || screens.smScreen ? `w-full` : `w-5/12`)
])}>
<View style={tw`flex-row border rounded-lg`}>
<Picker
selectedValue={formData.category}
style={tw`flex-1 py-2 border-r border-gray-300`}
onValueChange={(itemValue) => setFormData((prev) => ({ ...prev, category: itemValue }))}
>
<Picker.Item label="All Categories" value="all" />
{categories.loading ? (
<Picker.Item label="Loading..." value="loading" />
) : (
categories.data && typeof categories.data === 'object' &&
Object.entries(categories.data).forEach(([keys, values]: [string, any]) => {
Object.values(values).forEach((value: any) => {
<Picker.Item key={value.category_id} label={value.category_name} value={value.category_id} />
});
})
)}
</Picker>
</View>
</View>
);
}
</code>
<code>import React, { useEffect, useState, useContext } from 'react';
import { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import tw from 'twrnc';
import { ScreenContext } from '@/context/screenContext';
import { CategoryContext } from '@/context/categoriesContext';
import { loadedScreenSize } from '@/functions/main';
interface CategoriesState {
loading: boolean;
error?: any;
data?: object;
}
export default function Header() {
const [screens, setScreen] = useState<{ [key: string]: any }>({});
const [formData, setFormData] = useState({ category: '', search: '' });
const [toggleMenu, setToggleMenu] = useState(false);
const [categories, setCategories] = useState<CategoriesState>({
loading: true,
data: {
'0': { category_id: 0, category_name: 'loading', category_slug: 'loading' }
},
});
const screenX = useContext(ScreenContext);
const categoryX = useContext(CategoryContext);
useEffect(() => {
if (!screenX) {
setScreen({ ...loadedScreenSize });
} else {
setScreen({ ...screenX.screens });
}
}, [screenX]);
useEffect(() => {
if (categoryX) {
if (categoryX.categories.response) {
setCategories({
loading: categoryX.categories.loading,
error: categoryX.categories.error,
data: categoryX.categories.response,
});
}
}
}, [categoryX]);
const toggleMenuV = () => {
setToggleMenu(!toggleMenu);
};
const searchProducts = () => {
console.log('Form submitted with data:', formData);
setFormData({ category: '', search: '' });
};
return (
<View style={tw.style([
`mb-1`,
(screens.xsScreen || screens.smScreen ? `w-full` : `w-5/12`)
])}>
<View style={tw`flex-row border rounded-lg`}>
<Picker
selectedValue={formData.category}
style={tw`flex-1 py-2 border-r border-gray-300`}
onValueChange={(itemValue) => setFormData((prev) => ({ ...prev, category: itemValue }))}
>
<Picker.Item label="All Categories" value="all" />
{categories.loading ? (
<Picker.Item label="Loading..." value="loading" />
) : (
categories.data && typeof categories.data === 'object' &&
Object.entries(categories.data).forEach(([keys, values]: [string, any]) => {
Object.values(values).forEach((value: any) => {
<Picker.Item key={value.category_id} label={value.category_name} value={value.category_id} />
});
})
)}
</Picker>
</View>
</View>
);
}
</code>
import React, { useEffect, useState, useContext } from 'react';
import { View } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import tw from 'twrnc';
import { ScreenContext } from '@/context/screenContext';
import { CategoryContext } from '@/context/categoriesContext';
import { loadedScreenSize } from '@/functions/main';
interface CategoriesState {
loading: boolean;
error?: any;
data?: object;
}
export default function Header() {
const [screens, setScreen] = useState<{ [key: string]: any }>({});
const [formData, setFormData] = useState({ category: '', search: '' });
const [toggleMenu, setToggleMenu] = useState(false);
const [categories, setCategories] = useState<CategoriesState>({
loading: true,
data: {
'0': { category_id: 0, category_name: 'loading', category_slug: 'loading' }
},
});
const screenX = useContext(ScreenContext);
const categoryX = useContext(CategoryContext);
useEffect(() => {
if (!screenX) {
setScreen({ ...loadedScreenSize });
} else {
setScreen({ ...screenX.screens });
}
}, [screenX]);
useEffect(() => {
if (categoryX) {
if (categoryX.categories.response) {
setCategories({
loading: categoryX.categories.loading,
error: categoryX.categories.error,
data: categoryX.categories.response,
});
}
}
}, [categoryX]);
const toggleMenuV = () => {
setToggleMenu(!toggleMenu);
};
const searchProducts = () => {
console.log('Form submitted with data:', formData);
setFormData({ category: '', search: '' });
};
return (
<View style={tw.style([
`mb-1`,
(screens.xsScreen || screens.smScreen ? `w-full` : `w-5/12`)
])}>
<View style={tw`flex-row border rounded-lg`}>
<Picker
selectedValue={formData.category}
style={tw`flex-1 py-2 border-r border-gray-300`}
onValueChange={(itemValue) => setFormData((prev) => ({ ...prev, category: itemValue }))}
>
<Picker.Item label="All Categories" value="all" />
{categories.loading ? (
<Picker.Item label="Loading..." value="loading" />
) : (
categories.data && typeof categories.data === 'object' &&
Object.entries(categories.data).forEach(([keys, values]: [string, any]) => {
Object.values(values).forEach((value: any) => {
<Picker.Item key={value.category_id} label={value.category_name} value={value.category_id} />
});
})
)}
</Picker>
</View>
</View>
);
}
How can I properly render the Picker.Item components for the categories data from the context without running into these errors?