[Typography] Multiple children error when providing string with variable

[spiftire]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I'm using typescript. The following JSX has worked just fine untill upgrading to "react": "^18.1.0" and "@mui/material": "^5.6.3"

function ErrorComponent({ error }: { error: unknown }) {
    return (
        <Typography>An Error Occurred: {error}</Typography>
    )
}

Throws the following error: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.

While the following does not throw any errors:

function ErrorComponent({ error }: { error: unknown }) {
    return (
        <Typography>{`An Error Occurred: ${error}`}</Typography>

        <Typography>
            <>
                An Error Occurred: ${error}
            </>
        </Typography>
    )
}

Expected behavior 🤔

I would expect <Typography>An Error Occurred: ${error}</Typography> to work as is

Steps to reproduce 🕹

https://codesandbox.io/s/naughty-chatelet-iwt7ty?file=/src/Demo.tsx

Context 🔦

I would like to output the content of an unknown variable inside a Typography component

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa) (WSL) Binaries: Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm Browsers: Chrome: Used Firefox: Used npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.78 @mui/icons-material: ^5.2.5 => 5.6.2 @mui/lab: ^5.0.0-alpha.61 => 5.0.0-alpha.79 @mui/material: ^5.6.3 => 5.6.3 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/styles: ^5.2.3 => 5.6.2 @mui/system: 5.6.3 @mui/types: 7.1.3 @mui/utils: 5.6.1 @mui/x-data-grid: ^5.7.0 => 5.10.0 @mui/x-date-pickers: 5.0.0-alpha.0 @types/react: ^18.0.8 => 18.0.8 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 typescript: ^4.3.5 => 4.6.3 ```

[ZeeshanTamboli]

React.ReactNode type alias does not have unknown typescript type, so I think React is detecting it as multiple children, since unknown can't be assignable to any other type (string or number or other types which React.ReactNode has) when embedding it to the children as expression.

You were able to pass variable as test of type string because anything can be assignable to unknown but unknown isn't assignable to anything but itself.

Why are you typing it as unknown? You can have it strictly typed: https://codesandbox.io/s/solitary-currying-9m9u12?file=/src/Demo.tsx or use any.

The following JSX has worked just fine untill upgrading to "react": "^18.1.0" and "@mui/material": "^5.6.3"

Can you provide a CodeSandbox with the previous versions where it was working before?

[github-actions[bot]]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[spiftire]

Why are you typing it as unknown? You can have it strictly typed: https://codesandbox.io/s/solitary-currying-9m9u12?file=/src/Demo.tsx or use any.

The reason for using unknown in this context is that the type of an error is unknown to typescript until checked. I prefer not to use any as it might bleed into other types if variables are combined.

Can you provide a CodeSandbox with the previous versions where it was working before?

This was working prior to upgrading