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

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

• javascript
• reactjs
• typescript
• types
• react-hooks

Share Improve this question Follow edited Aug 6, 2021 at 7:14 asked Aug 5, 2021 at 13:29 user15603995user15603995 7

• 1 pls share minimum reproducable example – captain-yossarian from Ukraine Commented Aug 5, 2021 at 13:44
• Why do you pass an empty array to useState? What should your code do on first render, when selectedData is equal to this empty array? – Cerberus Commented Aug 5, 2021 at 13:44
• It should be just empty by default and when clicking on any data, state should be updated and data should be shown. @Cerberus – user15603995 Commented Aug 5, 2021 at 13:48
• You're initializing selectedData as an empty array any[] and paring it to a single object of type CartItemType. There's is no condition under which that parision would return true: how could they ever be the same object? – lbsn Commented Aug 5, 2021 at 13:53
• 2 There are several issues on the example you provided. As for the one mentioned in your question: if selectedData is going to hold a single object of type CartItemType you should initialize it as a single object of type CartItemType (or as undefined), not as an empty array. So try this: const [selectedData, setSelectedData] = React.useState<CartItemType>({} as CartItemType); – lbsn Commented Aug 5, 2021 at 14:58

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

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 ? ... :