Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot find name React$Node React Native

I'm adding typescript to my react-native app,

in App.tsx

I'm getting this error on Cannot find name React$Node on

const App: () => React$Node = () => {
 ...
}
like image 446
ImFarhad Avatar asked Apr 24 '20 12:04

ImFarhad


People also ask

Can't find name react?

To solve the "Cannot find name" error in React typescript, use a . tsx extension for the files in which you use JSX, set jsx to react-jsx in your tsconfig. json file and make sure to install all of the necessary @types packages for your application.

What is the difference between TSX and TS?

The . ts file extension is used when you are creating functions, classes, reducers, etc. that do not require the use of JSX syntax and elements, whereas the . tsx file extension is used when you create a React component and use JSX elements and syntax.

What is intrinsic attribute typescript?

IntrinsicAttributes interface can be used to specify extra properties used by the JSX framework which are not generally used by the components' props or arguments - for instance key in React. Specializing further, the generic JSX.

What is react component in react?

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.


1 Answers

I'm unsure of the syntax you're using, and not sure where React$Node comes from. From my experience, the correct typing and syntax should be React.ReactNode or React.ReactElement. For example:

import React from 'react'

const App = (): React.ReactElement => { 

  return (
    // component code
  )
}

As for the difference between ReactNode and ReactElement (because I wasn't entirely sure), I found ford04's answer useful - quoted here:

ReactElement and JSX.Element are the result of invoking React.createElement directly or via JSX transpilation. It is an object with type, props and key. [JSX.Element]

ReactNode is used as return type for render() in class components. It also is the default type for children attribute with [PropsWithChildren]

like image 73
Tom Oakley Avatar answered Oct 30 '22 03:10

Tom Oakley