Adding additional props to a component passed as a prop

Question

I am using React Table along with React Custom Scrollbars in a react-redux application. To connect these two I need to override the TbodyComponent in react table such that I can wrap the default tbodycomponent with the scrollbars and pass additional props to tweak rendering. Here's some stripped down code:

import React from 'react'
import ReactTable from 'react-table'
import {ReactTableDefaults} from 'react-table'
import { Scrollbars } from 'react-custom-scrollbars'

const TableBody = props => {
    //get additional props beyond just props.children here
    const {autoHeight} = props

    return (
        <Scrollbars 
            style={{
                height: '100vh'
            }}
        >
            <ReactTableDefaults.TbodyComponent>
                 {props.children}
            </ReactTableDefaults.TbodyComponent>
        </Scrollbars>
    )
}


const Table = props => {
    //props stuff would go here

    return (
            <div className="react-table-wrapper">
                <ReactTable {...props}
                            TbodyComponent={TableBody} //this works
                            //TbodyComponent={(props) => {return (<TableBody autoHeight={props.autoHeight} children={props.children} />)}} //this doesn't
                            data={data}
                            columns={columns}
                            ...
                />
            </div>
    )
}

I'm guessing I'm not understanding the proper way to pass a component in the TbodyComponent property, props.children, or something along those lines. This method just ends up looping forever.

In this example, how could I get the autoHeight prop to pass?

Update: Experimented with createElement and cloneElement and still receive the 130 error.

morasta morasta · Accepted Answer · 2018-05-04T19:38:15

The solution to this was to convert the TableBody stateless component into a full component, that is

class TableBody extends React.Component {

instead of

const TableBody = props => {

That's what React-Table was expecting.

Adding additional props to a component passed as a prop

3 Answers