0
403
ViewsTypeScript: Property 'name' does not exist on type 'any[]'
For some reason I can not run my React app, because following error:
TypeScript: Property 'name' does not exist on type 'any[]'.
I am exporting my TS type based on my API data:
export type CartItemType = {
id: number;
name: string;
image: string;
amount: number;
chair: {
name: string;
colors: {
white: {
hex: string;
};
};
};
};
Fetching the data:
const getProducts = async (): Promise<CartItemType[]> =>
await (await fetch("apiEndpoint")).json();
const [cartItems, setCartItems] = useState([] as CartItemType[]);
const { data, isLoading, error } = useQuery<CartItemType[]>(
"products",
getProducts
);
I would like to select the fetched data and I am doing it in such a way:
const [selectedData, setSelectedData] = React.useState([]);
{data?.map((item) => (
<button onClick={() => setSelectedData(item)}>SHOW</button>
{selectedData === item ? (
<p>{selectedData.chair.description}</p>
) : null}
Unfortunately I am having this error on selectedData:
This condition will always return 'false' since the types 'any[]' and 'CartItemType' have no overlap.
I don't really know what that means and how to fix it.
It would work only when I would specify the number in object array like this:
selectedData[0].name
But I have to make it work for selectedData.name
2 answers
Answer question0
You must aware of the value that the state is going to hold. It is important because the state update cause the re-render of the application.
Change your initial value of selectedData state variable to {}.
const [selectedData, setSelectedData] = React.useState({} as CartItemType);
Reason: Initially you are holding array value in a state and then later you are setting the state with objects and performed operation assuming it's an object. So, it's obvious that you must hold object value in the selectedData state.
This is the reason that you are getting this error message.
This condition will always return 'false' since the types 'any[]' and 'CartItemType' have no overlap.
The good part: I have made that change in the sandbox and the error goes away.
0
The accepted answer will fix the error but ideally you want to avoid Type casting
In my opinion, it is safer to set selectedData to null first to make sure you only use it if it has a correct value:
const [selectedData, setSelectedData] = React.useState<CartItemType | null>(null);
Then in your code you can do
if(selectedData) {
...
}
or
selectedData ? ... :