React-Table: using multiple accessors as props in a custom component

Question

I'm attempting to use React-Table and I'm running into an issue:

I need to use multiple accessors, then pass those values into a custom component as props so I can render a modal with certain stats for each user.

I know I can only pass a string or a function into the accessor inside React Table, but I'm not exactly sure how to return those values as props.

I've read the documentation on the site, and while it offers easy examples of how to combine things into one cell I'm still at a loss for how to handle the passing of props from multiple accessors into a custom component embedded in a cell.

// sample data
const data = {
 completionDate: "April 2, 2019 1:12 PM",
 courseCompleted true,
 firstName "John",
 hd: "Technology",
 lastName: "Doe",
 nextRequirement: "April 2, 2021 1:12 PM",
 userAccessDate "April 3, 2019 4:35 PM",
 userEmail: "john.doe@webmail.com"
 userToken:"123abc"
}

// columns structure
const columns=[{
            columns: [
                {
                    Header: "First Name",
                    accessor: "firstName"
                },
                {
                    Header: "Last Name",
                    accessor: "lastName"
                },
                {
                    Header: "Email",
                    accessor: "userEmail"
                },
                {
                    Header: "Course Completion",
                    accessor: "courseCompleted",
                    Cell: row => (
                        row.value ? 'Completed' : 'Incomplete'
                    )
                },
                {
                    Header: "Completion Date",
                    accessor: "completionDate",
                    Cell: row => {
                        if(row.value) {
                            return moment(row.value).format('L')
                        } else {
                            return 'Incomplete'
                        }
                    }
                },
                {
                    Header: "Next Due Date",
                    accessor: "nextRequirement",
                    Cell: row => {
                        if (!row.value) {
                            return <span className="text-danger">Incomplete</span>
                        } else if ((moment(row.value).diff(moment(), 'days') <= 30)) {
                            return <span className="text-danger">{moment(row.value).format('L')}</span>
                        } else if ((moment(row.value).diff(moment(), 'days') >= 31) && (moment(row.value).diff(moment(), 'days') <= 59)) {
                            return <span className="text-warning">{moment(row.value).format('L')}</span>
                        } else {
                            return <span className="text-success">{moment(row.value).format('L')}</span>
                        }
                    }
                },
// here's where the problem lays
                {
                    Header: "View Certificate",
                    accessor: d => {
                    }
                    Cell: row => {
                        return <div>
                                    <span onClick={this.openModal}>View Certficate</span>
                                    <Popup
                                        open={this.state.modal}
                                        closeOnDocumentClick
                                        onClose={this.closeModal}
                                        contentStyle={popupStyle}
                                    >
                                        <Certificate 
                                            firstName={row.row.firstName}
                                            lastName={row.row.lastName}
                                            completionDate={row.row.completionDate}
                                            userToken={row.original.userToken.slice(117, 129)}
                                            division={this.handleHd(row.original.hd)}
                                        />
                                    </Popup>
                               </div>
                    }
                },
                {
                    Header: "Reminder",
                    accessor: "userEmail",
                    Cell: row => {
                        return <MailTo email={row.value} />
                    }
                }
            ]
        }]

<ReactTable data={data}
            columns={columns}
            defaultPageSize={10}
            className="-striped -highlight"
/>

I've tried just leaving the accessor as firstName, and tapping into the row object by using row.row or row.original but that turned into a mess. I'm not sure how to go about this the right way and any help would be very appreciated.

Answer 1

This can be solved with a curried function.

const curried = xtraprops => row => (
  // do something with xtraprops
  row.value ? 'Completed' : 'Incomplete'
)

{
  Cell: curried(applyprops)
}