Moving React constant to its own file when it needs callbacks from a class

Question

Currently I have created a component that wraps BootstrapTable. I have to define a constant that represents the columns of data. But, the way I have it right now seems to really clutter up my render method. I'd like to move it to its own file, but I'm not sure the best way to do this, because it requires callbacks that are defined in the class (notably the onUpdateClicked method).

If the way I have it is a fine way of doing things, that would be good to know. But, assuming I did want to move it to another file regardless, suggestions would be appreciated for my own edification. Thanks!

    class MyTable extends Component {

    onUpdateClicked() {
        //do stuff
    }

    render() {
        let {data} = {...this.props}

        let columns = [
            {
                dataField: 'badge',
                text: 'Badge',
                sort: true
            }, {
                dataField: 'firstName',
                text: 'First',
                sort: true
            }, {
                dataField: 'lastName',
                text: 'Last',
                sort: true
            }, {
                dataField: 'email',
                text: 'Email',
                sort: true
            }, {
                dataField: 'loggedIn',
                text: 'Logged In',
                sort: true,
                formatter: (cell, row) => {
                    if (row.loggedIn) {
                        return (<FontAwesomeIcon icon="check"/>)
                    }
                }
            }, {
                dataField: 'update',
                text: 'Update',
                formatter: () => {
                    return (<Button onClick={this.onUpdateClicked} color="primary">Update</Button>)
                }
            }, 
        ];


        return (
            <div>
                <BootstrapTable Bootstrap4 keyField='badge' data={data} columns={columns}/>
            </div>
        )
    }
}

Answer 1

you can put the columns in a seperate file, but export a function that takes a function as a parameter to be used for the onClick

Columns.js

const columnsFn = someFunc => ([ // pass the function as a param.
    {
        dataField: 'badge',
        text: 'Badge',
        sort: true
    }, {
        dataField: 'firstName',
        text: 'First',
        sort: true
    }, {
        dataField: 'lastName',
        text: 'Last',
        sort: true
    }, {
        dataField: 'email',
        text: 'Email',
        sort: true
    }, {
        dataField: 'loggedIn',
        text: 'Logged In',
        sort: true,
        formatter: (cell, row) => {
            if (row.loggedIn) {
                return (<FontAwesomeIcon icon="check"/>)
            }
        }
    }, {
        dataField: 'update',
        text: 'Update',
        formatter: () => {
            return (<Button onClick={someFunc} color="primary">Update</Button>) // use it here
        }
    }, 
]); 
export default columnsFn;

YourFile.js

import columnsFn from './columns';

class MyTable extends Component {

    onUpdateClicked() {
        //do stuff
    }

    render() {
        const {data} = {...this.props}
        const myColumns = columnsFn(this.onUpdateClicked); // pass the function here

        return (
            <div>
                <BootstrapTable Bootstrap4 keyField='badge' data={data} columns={myColumns}/>
            </div>
        )
    }
}