ReactDOM.render is no longer supported in React 18

If you are using ReactDOM.render() in your React 18 app, you will definitely see the below issue.

ReactDOM.render is no longer supported in React 18

The reason is ReactDOM.render is no longer supported in React 18.

Earlier, we used to render the component in below way

ReactDOM.render(<NavBar />, document.getElementById('root'))

If we are using React 18, we should start using createRoot() instead of render()

Example

ReactDOM.createRoot(document.getElementById('root')).render(<NavBar />)

The render() method of the react-dom package is considered legacy starting react-dom version 18.

The method is replaced with the createRoot() method that is exported from react-dom/client.

The createRoot() method takes the root element as a parameter and creates a React root.

Happy Coding!

Adjacent JSX elements must be wrapped in an enclosing tag

If you are new to react, you will face this issue at some point.

If you probably reached this page via google search or any other search engine.

You are right place. I got you.

React issue

The common usecase or pattern for this issue is having multiple parent element in our JSX element or code.

Example:

function NavBar() {
    return (
        <h1>Intro site</h1>
        <ul>
            <li>Menu</li>
            <li>Profile</li>
            <li>Contact</li>
        </ul>
    )
}

Here we have both h1 and ul tag in the same level. Both are at parent level of whole component.

React will expect only one tag as parent tag. That doesn’t mean you have this kind of structure at all.

It expects us to surrond the component of same level tag with another tag.

So to resolve it we can surrond the elements with another div element.

Example

function NavBar() {
    return (
        <div>
            <h1>Intro site</h1>
            <ul>
                <li>Menu</li>
                <li>Profile</li>
                <li>Contact</li>
            </ul>
        </div>
    )
}

That’s it.
Happy Coding!