Export function declared inside React class component

Question

I'm trying to export a function declared in a react class component to use it in another file but that function uses the props of that class.

this is an exemple where i want to export the function handleDeleteAction()

import React, { Component } from 'react';
import { connect } from 'react-redux';
import swal from "sweetalert";
import { delete_user } from '../Actions';

class UserContainer extends Component {
    constructor(props) {
        super(props);
    }

    
    handleDeleteAction = async (event, { id, username }) => { // i want to export this function 
                await this.props.delete_user(id); //this is an action           
    };

    renderDataTable = () => {

        const { loading, data, pagination } = this.state;
        return (
            <DataTable
                id="trace"
                data={data ? data[0] : null}
                totalRows={data ? data[1] : null}
                columns={USER_COLUMNS} //the function is called inside the const USER_COLUMN
                loading={loading}
                
            />
        );
    };

    render() {

        return (
            <LayoutContainer renderDataTable={this.renderDataTable} title='Gestion des utilisateurs' />
        );
    }


export default connect(null, { loadUsersData, delete_user })(UserContainer);

and the function needs to be called in this file, it's fired when the user click on the button :

import { Tag, Button, Space } from 'antd';
import { AiFillDelete } from "react-icons/ai";
import { BsPencil } from "react-icons/bs";
import {handleDeleteAction} from '../user/UserContainer'
export const USER_COLUMNS = [
  
    {
        title: "Action", dataIndex: "id", key: "id", align: 'center', render: (text, record, index) => {
            // console.log("text", text);
            // console.log("record", record);
            // console.log("index", index);
            return (
                <Space size={'small'} >

                    <Button type="primary" icon={<AiFillDelete />} id={record.id} onClick={(e) => handleDeleteAction(e, record)} size='large' danger />

                </Space >
            );
        }
    }

];

score 1 · Answer 1 · answered May 17 '21 at 13:52

You can not export that function. That function is created whenever the constructor UserContainer creates an object and is local to the object created. You could create the function outside the class or even as a method of the class which you can export.

export async function handleDeleteAction(event, { id, username }){
    return this.props.delete_user(id);
};

class UserContainer extends Component {
    constructor(props) {
        super(props);
    }
        
    handleDeleteAction = handleDeleteAction.bind(this);

    renderDataTable = () => {

        const { loading, data, pagination } = this.state;
        return (
            <DataTable
                id="trace"
                data={data ? data[0] : null}
                totalRows={data ? data[1] : null}
                columns={USER_COLUMNS} //the function is called inside the const USER_COLUMN
                loading={loading}
                
            />
        );
    };

    render() {

        return (
            <LayoutContainer renderDataTable={this.renderDataTable} title='Gestion des utilisateurs' />
        );
    }
}

However this doesn't mean you will get access to the props passed down to any object instantiated by the UserContainer class. The exported function will need to be bound to a component that does have access to that value passed down through that prop. Just like we do in the UserContainer class.

I got it thank you very much for your answer, my real problem was how to pass that props. so the solution is to put my CONST inside the class UserContainer and the problem is solved. — Salah ED, May 17 '21 at 14:00

Export function declared inside React class component

1 Answers1