App bar with a primary search field not working

[LakshayRohilla]

Related page

https://mui.com/material-ui/react-app-bar/

Kind of issue

Other

Issue description

Usually copy pasting the component code from the docs into our personal project works,
However, I want to use App bar with a primary search field.

Its failing with the following error, at line 60:
Code, at line 60 :

const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

Output :

Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))
    at NavBar (navBar.jsx:60:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at beginWork$1 (react-dom.development.js:27465:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
    at workLoopSync (react-dom.development.js:26505:1)
    at renderRootSync (react-dom.development.js:26473:1)
    at recoverFromConcurrentError (react-dom.development.js:25889:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25789:1)

Context

No response

Search keywords: App bar with a primary search field

[LakshayRohilla]

Hi @siriwatknp,
For your support, I made a dummy project to get a better understanding of the error.
Project link : https://github.com/LakshayRohilla/mui-app-bar-issue-43882

Just clone it and run it using npm run start.
Here, I added 2 components Heading and Navbar(This is the one containing the App bar).

Hope this will come handy.

[sai6855]

@LakshayRohilla you are trying to use typescript syntax in .js files which is what causing the error

https://github.com/LakshayRohilla/mui-app-bar-issue-43882/blob/a473e90bf88f620733dc303ac5e31387c0789239/src/component/navbar.jsx#L60

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @LakshayRohilla! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[LakshayRohilla]

I changed the tsx code to jsx code earlier.
Still there was the same issue.

Though, today I noticed that 6.1.1 version is updated to 6.1.2.
Just by updating the mui version to 6.1.2 its working fine.