title: Open Modal from Table Row in React
body: <p><code>openBookDetails</code> sets <code>isBookDetailsOpen: true</code> which should change the className in <code>showHideClassName</code> to <code>modal display-block</code> and it should show on the screen but the modal doesn't show. However it appears in Elements in the Development tools</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './Update.css';
  import Search from '../Search/Search';
  // import Modal from './Modal/Modal';
  
  const Table = ({ data, openBookDetails }) =&gt; (
      &lt;table class="table table-hover"&gt;
          &lt;thead&gt;
              &lt;tr class="table-primary"&gt;
                  &lt;th scope="col"&gt;Title&lt;/th&gt;
                  &lt;th scope="col"&gt;Author&lt;/th&gt;
                  &lt;th scope="col"&gt;ISBN&lt;/th&gt;
                  &lt;th scope="col"&gt;No. Of Copies&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              {data.map(row =&gt; 
                  &lt;TableRow key={row.id} row={row} openBookDetails={openBookDetails}/&gt;
              )}
  
          &lt;/tbody&gt;
      &lt;/table&gt;
  )
  
  const TableRow = ({ row, openBookDetails }) =&gt; (
       &lt;tr class="table-light" onClick={openBookDetails}&gt;
          &lt;th scope="row" &gt;{row.title}&lt;/th&gt;
          &lt;td &gt;{row.author}&lt;/td&gt;
          &lt;td &gt;{row.isbn}&lt;/td&gt;
          &lt;td &gt;24&lt;/td&gt;
      &lt;/tr&gt;
  )
  
  const Modal = ({ closeBookDetails, isBookDetailsOpen, children }) =&gt; {
      const showHideClassName = isBookDetailsOpen ? 'modal display-block' : 'modal display-none';
  
      return (
        &lt;div className={showHideClassName}&gt;
          &lt;section className='modal-main'&gt;
            {children}
            &lt;button
              onClick={closeBookDetails}
            &gt;
              Close
            &lt;/button&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      );
    };
  
  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(
              &lt;main&gt;
              &lt;div class="container"&gt;
  
                  &lt;Search state={this.state} setTableData={this.setTableData} /&gt;
                  &lt;Table data={this.state.searchedBooks} openBookDetails={this.openBookDetails}/&gt;
                  &lt;Modal isBookDetailsOpen={this.state.isBookDetailsOpen} closeBookDetails={this.closeBookDetails} /&gt;
                  {/* &lt;Modal /&gt; */}
              &lt;/div&gt;
              &lt;/main&gt;
          )
      }
  }
  
  export default Update;
  </code></pre>