Bug: Rendering a variable in jsx within a functional component that is a bigint throws type error

[ByronBecker]

React (and ReactDOM) version: "^18.1.0"
TypeScript version: "^4.7.3",

Steps To Reproduce

1. Create this component in a typescript + react + react-dom application

function myComponent(score: bigint) {
  return <>
    <div>score: {score} </div>
  </>
}

2. See the ``TS2746: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.` error.

Link to code example:

The current behavior

Throws type error. Converting the bigint -> string via .toString() removes the error

The expected behavior

Should not throw an error

[liwenkang]

// node_modules/@types/react/index.d.ts
type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

in react types file, you can see the bigint is not an option for ReactNode.

[ByronBecker]

@liwenkang Right, but it should then throw a more informative error - not "multiple children were provided"

[eps1lon]

@liwenkang Right, but it should then throw a more informative error - not "multiple children were provided"

We can't do anything about that unfortunately. You would need to file that against https://github.com/microsoft/typescript

For bigint support see #20492