React integrate component through functions ( HOC )

Question

I am building an admin template using reactJs and one of the components that make up the entire page looks like this.

class UserManagement extends React.Component {
    state = {
        showDeleteModal: false
    };

    _toggleDeleteModal = () => {
        this.setState(prevState => ({
          showDeleteModal: !prevState.showDeleteModal
        }));
    };

    onDeleteRow = () => {
        console.log("delete");
    };

    render() {
        return (
            <div>
              {this.state.showDeleteModal && (
                <DeleteModal
                  title="Delete Data ?"
                  description="Are you sure you want to delete this data from the system ?"
                  onDeleteAction={this.onDeleteRow}
                  onToggleModal={this._toggleDeleteModal}
                />
              )}
            </div>
        );
    }   
} 

DeleteModal is basically a modal that pops up and displays a bunch of options to the user based on which the user selects an option, this is one of the many modals that are contained in this UserManagement component. As you can see I need to write out the DeleteModal code in the render function, doing this for the other modals causes excess code on this page that can probably be extracted out somehow.

In the end I would like to be able to do something like th

Answer 1

I didn't get your question clearly but am hoping you are asking how you could extract out the DeleteModal component. That being said, here is my thought;

 class UserManagement extends React.Component { state = { showDeleteModal: false }; _toggleDeleteModal = () => { this.setState(prevState => ({ showDeleteModal: !prevState.showDeleteModal })); }; onDeleteRow = () => { console.log("delete"); }; renderDeleteModal = () => ( <DeleteModal title={"Delete Data ?"} description={ "Are you sure you want to delete this data from the system ?" } onDeleteAction={this.onDeleteRow} onToggleModal={this._toggleDeleteModal} /> ); render() { return ( <React.Fragment> {this.state.showDeleteModal && this.renderDeleteModal} </React.Fragment> ); } } 

Answer 2

I'm making the assumption that all the modals that you have are having similar structure, and since at any point of time only one modal will be shown to the user you can create on reusable modal that has the following fields:

1. Title
2. Description
3. Action button
4. Cancel button

You can try creating something like this:

class UserManagement extends React.Component {

    constructor(props) {
        this.state = {
            showModal: false,
            modalTitle: "",
            modalDescription: "",
            modalAction: null
        }
    }

    showDeleteModal() {
        this.setState(prevState => ({
            modalTitle: "Delete Data ?",
            modalDescription: "Are you sure you want to delete this data from the system ?",
            modalAction: this.onDeleteRow
        }), this._toggleDeleteModal)
    }

    _toggleDeleteModal = () => {
        this.setState(prevState => ({
        showModal: !prevState.showModal
        }))
    };

    onDeleteRow = () => {
        console.log("delete");
    };

    render() {
        return (
            <div>
            {this.state.showModal && (
                <Modal
                    data={this.state.modal}
                    onToggleModal={this._toggleModal}
                />
            )}
        </div>
        );
    }

} 

You can have one specific function for each of your use case (like Delete) which sets that title, description etc.

You can further move all the code that I've shown to a HOC and import it in your UserManagement component, if you think they will perform static operations with no input requirement from UserManagement component.