JSX.Element is Deprecated

Question

JSX.Element is Deprecated

agroot2002 opened this issue 2 years ago · 15 comments

agroot2002 commented 2 years ago

In " Typing Component Props " under " Useful React Prop Type Examples " , example given for children Element as props ( JSX.Element ) is incorrect it produce errors in new versions , instead React.ReactElement is suggested method to use .

In " Functional Components " under 3rd example also the JSX.Element is used instead React.ReactElement must be there .

I came across this error and it took me two days to figure this out in my code .
So I don't want someone else to run in the same problem .

Answer 1 · 2023-09-28T12:34:12.000Z

@agroot2002 please assign this issue to me

Answer 2 · 2023-09-28T14:49:23.000Z

@jatinder14 Sorry but how can I do so ?

Answer 3 · 2023-09-28T14:58:57.000Z

We don't have to assign it, just submit a PR and link to this issue.

Answer 4 · 2023-09-28T21:07:56.000Z

@filiptammergard sure

Answer 5 · 2023-09-28T21:09:55.000Z

@agroot2002 could you please share the page link .
OR
steps to get the page where you finding this Deprecated line of code so that i can fix it there with suggestions provided by you ?

Answer 6 · 2023-10-01T08:35:19.000Z

Sorry I was unable to respond but the issue is not resolved yet as the site shows the old data for JSX.Element instead of React.ReactElement , Here are the Links :
react-prop-type-examples
function_components

Answer 7 · 2023-10-01T09:57:17.000Z

The global namespace is deprecated, not JSX.Element itself. So you want to use React.JSX.Element

Answer 8 · 2023-10-01T11:58:16.000Z

@eps1lon
Hello! This is my first issue. I'm currently working on it, and I recently learned about JSX.Element and React.JSX.Element. After some consideration, I decided to change all instances of JSX.Element to React.JSX.Element. However, I couldn't find enough resources to improve the summary. Despite that, I've made the necessary changes. Should I go ahead and submit the pull request?

Answer 9 · 2023-10-01T15:45:09.000Z

@mohit-negi @eps1lon Yeah but React.ReactElement is more specific and helps while using attributes in element like src in img tag . In React.JSX.Element it gives type any , have a look at this : StackOverflow

I am currently at very beginner stage in TS so correct me if I am wrong , According to me React.ReactElement must be better option 👍

Answer 10 · 2023-10-01T18:36:50.000Z

@agroot2002 I'm new to TS too. Yes, you're right. The only reason to use React.JSX.Element instead of React.ReactElement is if you're using a library that doesn't expose the React.ReactElement type. This is probably unnecessary in this case, since it's a React-TypeScript cheatsheet.

Answer 11 · 2023-10-02T06:14:16.000Z

As @eps1lon said, it should be React.JSX.Element in both of the mentioned cases. ReactElement should almost never be used.

Will accept a PR changing JSX.Element to React.JSX.Element.

Answer 12 · 2025-03-02T20:15:30.000Z

ReactElement should almost never be used

@filiptammergard Sorry for necroposting, but why shouldn't it be used? What's wrong with ReactElement?

Answer 13 · 2025-03-02T20:18:50.000Z

ReactElement should almost never be used

@filiptammergard Sorry for necroposting, but why shouldn't it be used? What's wrong with ReactElement?

In what case would you want to use it?

Answer 14 · 2025-03-04T11:46:01.000Z

@filiptammergard I've been using it wherever this project recommends using JSX.Element as I saw it used this way in other projects (e.g. in MUI).

Answer 15 · 2025-03-04T12:15:41.000Z

Here's more information: https://www.totaltypescript.com/jsx-element-vs-react-reactnode

Generally, you probably want to use ReactNode. If you want to use allow only JSX elements (and not JS primitives), you can use ReactElement.