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 >
            );
        }
    }

];

MinusFour · Accepted Answer · 2021-05-17 13:52:37Z

1

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.

answered May 17, 2021 at 13:52

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salah ED Over a year ago

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.

MinusFour Over a year ago

Where did you put const?

Salah ED Over a year ago

inside renderDataTable() directly

Collectives™ on Stack Overflow

Export function declared inside React class component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related