Setting Parent Component Modal Props From Other Child - ReactJS

Question

Firstly like to say that I am pretty new to React, however after scouring the internet for an answer to this one sadly nothing quite fits perfectly so here I am.

I have a component that holds a bootstrap modal which I then want to set the values of from another child and finally show the modal. While I could solve this problem by simply declaring the modal child inside the 2nd child component this would cause multiple renders of the modal for each child (generating a lot of redundant HTML code). So I want to declare the modal component in the parent and then somehow have its values set by the child when it is activated (I have created a basic version for ease of viewing):

function DeleteModal(props)
{
    return (
        
            
                

                    
                        Confirm Delete
                        
                    

                    
                        You are about to delete this option
                    

                    
                        
                        
                    

                
            
        
    );
}

class ChildObj extends React.Component 
{

    constructor(props)
    {
        super(props);
    }

    DeleteVal(optionVal)
    {
        //Pass values to parent's "DeleteModal" props somehow?

        //Show Modal
        $('#div_DeleteModal').modal('show')
    }

    render() 
    {
        return (
            
                {this.props.name}
                {this.props.delOptions.map(delOption =>
                    
                )}
            
        );
    }
}

//Main App
class App extends React.Component 
{
    constructor(props) 
    {
        super(props);

        this.childObjs = [
            {'Name' : 'Obj A', 'DelOptions' : ['Option A', 'Option B', 'Option C']},
            {'Name' : 'Obj B', 'DelOptions' : ['Option A', 'Option B', 'Option C']},
            {'Name' : 'Obj C', 'DelOptions' : ['Option A', 'Option B', 'Option C']}
        ];
    }

    render()
    {
        return(
            
                
                
                    {this.childObjs.map(childObj =>
                        
                    )}
                
            
        );
    }
}

ReactDOM.render(
    ,
    document.getElementById('ReactContent')
);

Many Thanks in advance! :)

user_2060248 · Answer

Thank you for the running code! Your approach to create a single copy of Delete Dialog is very good. Here are few things that you can do:

In React how to set and get data: To set data inside, add properties to a component and to get data out of the component, use property which have names like that of event like onChange, onClick etc.

Add an onClick property to the ChildObj and call it like this.props.onClick()
In the parent i.e. App handle this click event, use the the id passed in above step to get the child object from the childObjs array.
In the parent have a state to open and close the dialog box and pass it to the DeleteModal as its property e.g. open. Internally DeleteModal will map this property to an open state to show and hide the modal box.
In the parent have another state to keep reference of child object and pass it to the DeleteModal as its another property, may be 'data'. Internally DeleteModal will map this property to a data state to show values wherever you want to show in the modal box.
In the DeleteModal modal box, have an onClose property which you would want to call from the Close button of the dialog box. Parent (App) will handle this close event to clear the selected child data and open property. This step is more of cleaning the references.

Setting Parent Component Modal Props From Other Child - ReactJS

1 Answers