从React中的表行打开模态

Question

openBookDetails设置了isBookDetailsOpen: true，这会将showHideClassName中的className更改为modal display-block，它应该显示在屏幕上，但是模态不显示。但是它出现在开发工具的Elements中

import React, { Component } from 'react';
import './Update.css';
import Search from '../Search/Search';
// import Modal from './Modal/Modal';

const Table = ({ data, openBookDetails }) => (
    <table class="table table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">No. Of Copies</th>
            </tr>
        </thead>
        <tbody>
            {data.map(row => 
                <TableRow key={row.id} row={row} openBookDetails={openBookDetails}/>
            )}

        </tbody>
    </table>
)

const TableRow = ({ row, openBookDetails }) => (
     <tr class="table-light" onClick={openBookDetails}>
        <th scope="row" >{row.title}</th>
        <td >{row.author}</td>
        <td >{row.isbn}</td>
        <td >24</td>
    </tr>
)

const Modal = ({ closeBookDetails, isBookDetailsOpen, children }) => {
    const showHideClassName = isBookDetailsOpen ? 'modal display-block' : 'modal display-none';

    return (
      <div className={showHideClassName}>
        <section className='modal-main'>
          {children}
          <button
            onClick={closeBookDetails}
          >
            Close
          </button>
        </section>
      </div>
    );
  };

class Update extends Component{
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            suggestions: [],
            setOfAllBooks: [],
            searchedBooks: [],
            isBookDetailsOpen: false,
        };

        this.openBookDetails = this.openBookDetails.bind(this);
        this.setTableData = this.setTableData.bind(this);
    }

    setTableData(searchedBook){
        this.setState({searchedBooks: searchedBook})

        console.log(this.state.searchedBooks)
    }

    openBookDetails(){
        console.log('openBookDetails')
        this.setState({ isBookDetailsOpen: true})
    }

    closeBookDetails(){
        this.setState({ isBookDetailsOpen: false})
    }

    render(){
        return(
            <main>
            <div class="container">

                <Search state={this.state} setTableData={this.setTableData} />
                <Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/>
                <Modal isBookDetailsOpen={this.state.isBookDetailsOpen} closeBookDetails={this.closeBookDetails} />
                {/* <Modal /> */}
            </div>
            </main>
        )
    }
}

export default Update;