I am making a simple TODO App using MERN Stack. But can't able to run because of above mentioned error i.e. Target container is not a DOM element. I checked out whole code but can't able to find its cause or solution. This are the problems. Please help here.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import {BrowserRouter as Link, Router, Route} from 'react-router-dom';
import TodoList from './components/todo-list';
class App extends Component
{
render()
{
return(
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a href="/" className="navbar-brand">
<img src={logo} alt="Logo" height="40" width="40"/>
</a>
<Link to="/" className="navbar-brand">MERN Stack TO-DO App</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="myNavBar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="myNavBar">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
</ul>
</div>
</nav>
</div>
<Route path="/" exact component={TodoList}></Route>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
