react prop is undefined in child component - reactjs

Question

Main.js
import axios from 'axios'
import React, { Component, useEffect, useState } from 'react'
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import Books from './Books'
import Navbar from './Navbar'
import AddBook from './AddBook';
import BookDetail from './BookDetail';
const Main = () => {
let [selectedBook, setSelectedBook] = useState() // Storing the data from Books.js
let [books, setBooks] = useState([])
useEffect(() => {
axios.get('http://127.0.0.1:8000/api/get-books')
.then(res => {
setBooks(books = res.data)
})
})
return (
<Router>
<div>
<Navbar title={selectedBook}/> // is defined here <----
<div className='container'>
<Switch>
<Route exact path='/' >
<Books books={books} onBookSelect={(book) => {setSelectedBook(book)} }/> // Receiving the data from here
</Route>
<Route path='/add-book' >
<AddBook />
</Route>
<Route path={`/details`} >
<BookDetail bookId={selectedBook} /> // is undefined when passed here <----
</Route>
</Switch>
</div>
</div>
</Router>
)
}
export default Main
Books.js
import React, { Component, useState } from 'react'
import BookDetail from './BookDetail'
const Books = ({books, onBookSelect}) => {
const sendBookId = e => {
let bookId = e.target.value
onBookSelect('i am not undefined') // sending the data to Main.js
setTimeout(function(){ window.location.href='http://localhost:3000/details' }, 10)
}
return (
<div>
<div className='books'>
{books.map(book => (
<div className='book'>
<h2>{book.name}</h2>
<p>Author: <a href='#'>{book.author}</a></p>
<button className="btn" value={book.id} onClick={sendBookId}>View Details</button> // Getting the id from here
</div>
))}
</div>
</div>
)
}
export default Books
BookDetail.js
import React, { useEffect } from 'react'
import axios from 'axios'
import { useState } from 'react'
const BookDetail = ({bookId}) => {
return (
<div>
<p>book: {bookId}</p> // bookId is undefined
</div>
)
}
export default BookDetail
Sample from localhost:8000/api/get-books
{
"id": 5,
"name": "Book1",
"author": "Author1",
"content": "a normal book",
"isbn": "235456",
"passcode": "123",
"created_at": "2021-07-12T16:29:47.114356Z",
"pages": "3"
}
Basically, the data is sent from Book.js to the parent component which is Main.js and which is stored in selectedBook, and the data is defined and displays in the title, but when I add it as a prop in and try to access it from there it becomes undefined, what am I doing wrong?

Answer 1

Issue
Credit to Yoshi for calling it out first, but there is an issue with the way you navigate from your home page to the book details page. Mutating the window.location.href object will actually reload the page, and your app. Since React state lives in memory it is lost upon page reloading.
Solution
Use the history object provided by the Router context to PUSH to the new route. Since you are already using a function component you can import the useHistory React hook from react-router-dom and issue the imperative navigation.
import { useHistory } from 'react-router-dom';
...
const Books = ({ books, onBookSelect }) => {
const history = useHistory(); // <-- access the history object from hook
const sendBookId = (e) => {
const bookId = e.target.value;
onBookSelect(bookId);
history.push("/details"); // <-- issue PUSH to route
};
return (
<div>
<div className="books">
Books
{books.map((book) => (
<div className="book">
<h2>{book.name}</h2>
<p>
Author: {book.author}
</p>
<button className="btn" value={book.id} onClick={sendBookId}>
View Details
</button>
</div>
))}
</div>
</div>
);
};