React : Uncaught Error: Target container is not a DOM element - reactjs

Question

can you please help me? i read that in routes the components need to change to elements but it still doesn't
render.
the page will not render the root path at localhost:3000/.
error message
react-dom.development.js:26091 Uncaught Error: Target container is not a DOM element.
App.js
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import App from "./App";
import CreateBook from "./components/CreateBook";
import ShowBookDetails from "./components/ShowBookDetails";
import UpdateBookInfo from "./components/UpdateBookInfo";
const rootElement = document.getElementById("/");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<ShowBookDetails />} />
<Route path="create-book" element={<CreateBook />} />
<Route path="edit-book" element={<UpdateBookInfo />} />
</Routes>
</BrowserRouter>,
rootElement
);
export default App;
components/ShowBookDetails.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../App.css';
import axios from 'axios';
class showBookDetails extends Component {
constructor(props) {
super(props);
this.state = {
book: {}
};
}
componentDidMount() {
// console.log("Print id: " + this.props.match.params.id);
axios
.get('http://localhost:8082/api/books/'+this.props.match.params.id)
.then(res => {
// console.log("Print-showBookDetails-API-response: " + res.data);
this.setState({
book: res.data
})
})
.catch(err => {
console.log("Error from ShowBookDetails");
})
};
onDeleteClick (id) {
axios
.delete('http://localhost:8082/api/books/'+id)
.then(res => {
this.props.history.push("/");
})
.catch(err => {
console.log("Error form ShowBookDetails_deleteClick");
})
};
render() {
const book = this.state.book;
let BookItem = <div>
<table className="table table-hover table-dark">
{/* <thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead> */}
<tbody>
<tr>
<th scope="row">1</th>
<td>Title</td>
<td>{ book.title }</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Author</td>
<td>{ book.author }</td>
</tr>
<tr>
<th scope="row">3</th>
<td>ISBN</td>
<td>{ book.isbn }</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Publisher</td>
<td>{ book.publisher }</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Published Date</td>
<td>{ book.published_date }</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Description</td>
<td>{ book.description }</td>
</tr>
</tbody>
</table>
</div>
return (
<div className="ShowBookDetails">
<div className="container">
<div className="row">
<div className="col-md-10 m-auto">
<br /> <br />
<Link to="/" className="btn btn-outline-warning float-left">
Show Book List
</Link>
</div>
<br />
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Book's Record</h1>
<p className="lead text-center">
View Book's Info
</p>
<hr /> <br />
</div>
</div>
<div>
{ BookItem }
</div>
<div className="row">
<div className="col-md-6">
<button type="button" className="btn btn-outline-danger btn-lg btn-block" onClick={this.onDeleteClick.bind(this,book._id)}>Delete Book</button><br />
</div>
<div className="col-md-6">
<Link to={`/edit-book/${book._id}`} className="btn btn-outline-info btn-lg btn-block">
Edit Book
</Link>
<br />
</div>
</div>
{/* <br />
<button type="button" class="btn btn-outline-info btn-lg btn-block">Edit Book</button>
<button type="button" class="btn btn-outline-danger btn-lg btn-block">Delete Book</button> */}
</div>
</div>
);
}
}
export default showBookDetails;

Answer 1

you should write components name with uppercase:
class showBookDetails extends Component - class ShowBookDetails extends Component