title: React data table component, passing info for clicked row into modal
body: <p>I'm making an offline PWA with ReactJS and I've started using the react-data-table-component, which has been great so far. </p>
  
  <p>I've set the table to have an <code>onRowClicked</code> function that is called anytime a row is clicked, and so far, I only have that function opening a modal upon click which does indeed work.</p>
  
  <p>My issue is that I want the modal to contain information from the row elements for the row that was clicked. So basically, if I click the first row that has the title "Hello There" (element.title) I want the modal to also contain the elements for that row.</p>
  
  <p>This code shows everything I have, including how I'm mapping my documents from PouchDB into the elements object , which is what informs the rows in my data table.</p>
  
  <p>What do I need to do in order to pass the info for the clicked row into the modal?</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState,useMemo} from 'react';
  import { Column, Row } from 'simple-flexbox';
  import { StyleSheet, css } from 'aphrodite/no-important';
  
  const columns = [
    {
      name: 'Title',
      sortable: true,
      cell: row =&gt; (&lt;div&gt;{row.title}&lt;/div&gt;),
    },
    {
      name: 'Date of Entry',
      selector: 'createdAt',
      sortable: true,
      right: true,
    },
  ];
  
  class MedJournalComponent extends React.Component {
  
      constructor(props){
        super(props);
        this.state = {
          loading: true,
          elements: null,
          notebookDisplayOpen: false
        };
  
        this.fetchData.bind(this);
      }
  
      componentDidMount(){
        this.fetchData();
      }
  
      fetchData = () =&gt; {
        this.setState({
            loading: true,
            elements: null,
        });
        this.props.notes.db.allDocs({
            include_docs: true,
        }).then(result =&gt; {
            const rows = result.rows;
            this.setState({
                loading:false,
                elements: rows.map(row =&gt; row.doc),
            });
        }).catch((err) =&gt;{
            console.log(err);
        });
      }
  
      notebookEntryHandler = () =&gt; {
        this.setState({notebookDisplayOpen: true});
      }
  
      closeNotebookEntry = () =&gt; {
        this.setState({notebookDisplayOpen: false});
      }
  
      render() {
  
          const { notebookDisplayOpen } = this.state;
  
          if (this.state.loading || this.state.elements === null) {
              return `loading...`;
          }
          return (
              &lt;Column&gt;
  
                  &lt;Modal open={notebookDisplayOpen} onClose={this.closeNotebookEntry}&gt;
                      &lt;div&gt;Test&lt;/div&gt;
                  &lt;/Modal&gt;
  
                  &lt;DataTable
                      title="Notebook Entries"
                      columns={columns}
                      data={this.state.elements}
                      theme="solarized"
                      selectableRows 
                      onRowClicked={this.notebookEntryHandler}
                      Clicked
                      Selected={handleChange}
                  /&gt;
  
              &lt;/Column&gt;
          );
      }
  }
  
  export default MedJournalComponent;
  </code></pre>