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.

score 1 · Accepted Answer · answered May 04 '18 at 19:38

1

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.

answered May 04 '18 at 19:38

morasta

150
1
13

Drew Jex · Answer 2 · 2018-05-03T21:12:08.113

0

Is there a reason why this wouldn't work?

TbodyComponent={<TableBody autoHeight={props.autoHeight} />}

Also, I don't think you need to pass props.children - that should happen by default.

For reference, I looked at the answer provided here to a similar question: https://stackoverflow.com/a/39655113/8060919

edited May 03 '18 at 21:12

answered May 03 '18 at 21:02

Drew Jex

845
2
13
24

Tried that and receive the following React error: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." – morasta May 04 '18 at 18:10
Have you checked to make sure you're doing all of your imports correctly? See https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa. You may be importing components with brackets when you shouldn't be. – Drew Jex May 04 '18 at 19:24

Flummiboy · Answer 3 · 2022-12-13T10:19:03.840

0

In the case of react-table you could pass the props via the getTbodyProps. It must be a function returning the props as an object.

<ReactTable TbodyComponent={TableBody} getTbodyProps={()=>({autoHeight})}/>

See in the code

edited Dec 13 '22 at 10:19

answered Dec 13 '22 at 10:13

Flummiboy

591
1
7
20

score -1 · Answer 4 · answered Sep 24 '19 at 02:25

-1

Try this

<ReactTable TbodyComponent={v => <DropTbody test={null} />}

answered Sep 24 '19 at 02:25

Edward Fancher

79
1
4

1

Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). This provided answer may be correct, but it could benefit from an explanation. Code only answers are not considered "good" answers. – Trenton McKinney Sep 24 '19 at 03:15

Adding additional props to a component passed as a prop

4 Answers4