React typescript how use types useState and render list in tsx

Question

How can I set type to useState and render list with map in React TypeScript?

I have a component:

export type Item = {
  name: string;
  title: string;
};
export type ItemTypes = {
  item: Item[];
};

export const ItemList: FC = () => {
   const [items, setItems] = useState<ItemsTypes | []>([])

   useEffect(() => {
    let items = [
      {
        name: "A",
        title: "B",
      },
      {
        name: "C",
        title: "D",
      }
    ]
    setItems()
   }, [);

   return (
     <div>
         {items?.map((item) => (
          <>{item.name}</>
         ))}
     </div>
   )
}

And under .map line red stroke and saying:

any
Property 'map' does not exist on type 'ItemTypes | []'.

Where is my mistake?

msapkal · Accepted Answer · 2020-05-25 21:27:42Z

4

As defined ItemTypes is not an array but instead an object having property item, hence the error. Use Item[] instead.

const [items, setItems] = useState<Item[]>([])

edited May 25, 2020 at 21:27

answered May 25, 2020 at 21:19

msapkal

8,3462 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ciz30 Over a year ago

yes it's worked but useState<Item[]>(null) here need to be useState<Item[]>([])

subashMahapatra · Accepted Answer · 2020-05-25 21:30:33Z

There are a couple of things wrong with the your implementation.

First if you want to export the type alias ItemTypes you can set the type alias for ItemTypes like this export type ItemTypes = Item[].

Second, you are never calling setItems with the items you have created in useEffect.

Lastly, because you are trying to access the name property on each item you should be checking item.length in a conditional otherwise it will throw an error cannot access property name of undefined if you do try to load the items asynchronously.

Solution


    export type Item = {
      name: string;
      title: string;
    };

    export type ItemTypes = Item[];

    export const ItemList: FC = () => {
       const [items, setItems] = useState<ItemsTypes | []>([])

       useEffect(() => {
        let items = [
          {
            name: "A",
            title: "B",
          },
          {
            name: "C",
            title: "D",
          }
        ]
        setItems(items)
       }, []);

       return (
         <div>
             {
               items.length && items.map((item) => (<p>{item.name}</p>) )

             }
         </div>
       )
    }

Collectives™ on Stack Overflow

React typescript how use types useState and render list in tsx

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related