I'm making an offline PWA with ReactJS and I've started using the react-data-table-ponent, which has been great so far.

I've set the table to have an onRowClicked 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.

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.

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.

What do I need to do in order to pass the info for the clicked row into the modal?

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 => (<div>{row.title}</div>),
  },
  {
    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);
    }

    ponentDidMount(){
      this.fetchData();
    }

    fetchData = () => {
      this.setState({
          loading: true,
          elements: null,
      });
      this.props.notes.db.allDocs({
          include_docs: true,
      }).then(result => {
          const rows = result.rows;
          this.setState({
              loading:false,
              elements: rows.map(row => row.doc),
          });
      }).catch((err) =>{
          console.log(err);
      });
    }

    notebookEntryHandler = () => {
      this.setState({notebookDisplayOpen: true});
    }

    closeNotebookEntry = () => {
      this.setState({notebookDisplayOpen: false});
    }

    render() {

        const { notebookDisplayOpen } = this.state;

        if (this.state.loading || this.state.elements === null) {
            return `loading...`;
        }
        return (
            <Column>

                <Modal open={notebookDisplayOpen} onClose={this.closeNotebookEntry}>
                    <div>Test</div>
                </Modal>

                <DataTable
                    title="Notebook Entries"
                    columns={columns}
                    data={this.state.elements}
                    theme="solarized"
                    selectableRows 
                    onRowClicked={this.notebookEntryHandler}
                    Clicked
                    Selected={handleChange}
                />

            </Column>
        );
    }
}

export default MedJournalComponent;

I'm making an offline PWA with ReactJS and I've started using the react-data-table-ponent, which has been great so far.

I've set the table to have an onRowClicked 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.

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.

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.

What do I need to do in order to pass the info for the clicked row into the modal?

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 => (<div>{row.title}</div>),
  },
  {
    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);
    }

    ponentDidMount(){
      this.fetchData();
    }

    fetchData = () => {
      this.setState({
          loading: true,
          elements: null,
      });
      this.props.notes.db.allDocs({
          include_docs: true,
      }).then(result => {
          const rows = result.rows;
          this.setState({
              loading:false,
              elements: rows.map(row => row.doc),
          });
      }).catch((err) =>{
          console.log(err);
      });
    }

    notebookEntryHandler = () => {
      this.setState({notebookDisplayOpen: true});
    }

    closeNotebookEntry = () => {
      this.setState({notebookDisplayOpen: false});
    }

    render() {

        const { notebookDisplayOpen } = this.state;

        if (this.state.loading || this.state.elements === null) {
            return `loading...`;
        }
        return (
            <Column>

                <Modal open={notebookDisplayOpen} onClose={this.closeNotebookEntry}>
                    <div>Test</div>
                </Modal>

                <DataTable
                    title="Notebook Entries"
                    columns={columns}
                    data={this.state.elements}
                    theme="solarized"
                    selectableRows 
                    onRowClicked={this.notebookEntryHandler}
                    Clicked
                    Selected={handleChange}
                />

            </Column>
        );
    }
}

export default MedJournalComponent;

• javascript
• reactjs
• react-data-table-ponent

Share Follow edited Mar 28, 2020 at 0:45 Henry 15.8k77 gold badges4848 silver badges6666 bronze badges asked Mar 28, 2020 at 0:00 Geoff_SGeoff_S 5,10577 gold badges5858 silver badges168168 bronze badges 5

• you can always search in rources ... github./jbetancur/react-data-table-ponent/blob/… ... as expected handler gets row – xadm Commented Mar 28, 2020 at 0:31
• Wait, I didn't see that anywhere for some reason. So I should be able to keep my onRowClicked line the way it is, but in the function I'm calling it should expect row by default? – Geoff_S Commented Mar 28, 2020 at 0:45
• it's logical, isn't it ? handler without that is unusable, not needed? – xadm Commented Mar 28, 2020 at 0:48
• @xadm I guess my question is how to access it in my function though? I'm a react noob still, so I'm just trying to figure out from that source, how can I access the row in my notebookEntryHandler? – Geoff_S Commented Mar 28, 2020 at 1:44
• 2 try notebookEntryHandler = (row, e) => ? – xadm Commented Mar 28, 2020 at 1:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

change:

notebookEntryHandler = () => {
  this.setState({notebookDisplayOpen: true});
}

to:

notebookEntryHandler = row => {
  this.setState({notebookDisplayOpen: true});
}

row represents the clicked row, you can store it in state and use it in the modal.