How To Fix React(typescrtipt) Error "invalid Hook Call."?

I got error: 'Invalid hook call. Hooks can only be called inside of the body of a function component.' in react function: interface Items { items: any[] } const [items, setItems

Solution 1:

You need to call React Hooks from within a component, like so:

interface Items {
  items: any[]
}

constItemsList: React.FC<Items> = ({ items }) => {
  const [items, setItems] = useState<Items>();
 
  useEffect(() => {
    const response = Http.get<Items>(url).then(res =>setItems(res)) || [] asItems[]
  }, []);

  return (
      <ul>
        {items.map((item) => {
          return (
            <ItemPreviewkey={item.id}item={item}/>
          );
        })}
      </ul>
  )
}

exportdefaultItemsList

See the Rules of Hooks for more information:

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

• ✅ Call Hooks from React function components.
• ✅ Call Hooks from custom Hooks.