react send data from child component to parent - reactjs

Question

Main.js (Parent)
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 [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='LunaBooks'/>
<div className='container'>
<Switch>
<Route exact path='/' >
<Books books={books} />
</Route>
<Route path='/add-book' >
<AddBook />
</Route>
<Route path='/details/' >
<BookDetail bookName={} /> // put the bookName from Books.js here <----
</Route>
</Switch>
</div>
</div>
</Router>
)
}
export default Main
Books.js (Child)
import React, { Component, useState } from 'react'
import BookDetail from './BookDetail'
const Books = ({books}) => {
let [bookName, setBookName] = useState('') // send the bookname to Main.js
const SendBookDetails = e => {
let bookName = e.target.value
setBookName(bookName = bookName)
}
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.name} onClick={SendBookDetails}>View Details</button>
</div>
))}
</div>
</div>
)
}
export default Books
To put it simply, I want to send the bookName that is located in Books.js and put in the Main.js so that I can pass it in BookDetail.js, I know how to do in the reverse way but this is just confusing me for some reason... I'm pretty new to react so please bear with me!

Answer 1

Make a selectedBook state in the parent.
const [selectedBook, setSelectedBook] = useState()
Pass a callback function as a prop "onBookSelect" to the child.
<Books books={books} onBookSelect={(book) => { setSelectedBook(book) } />
Then in the child call the callback function with new value. in your SendBookDetails function.
const Books = ({books, onBookSelect}) => {
//...
const SendBookDetails = e => {
let bookName = e.target.value
setBookName(bookName)
onBookSelect(bookName)
}
Then pass that state to the props of your book details component.
<BookDetail bookName={selectedBook} />