CODEWITHSUNDEEP
javascriptreactjs
Sabrilogesh K
Sabrilogesh K

Reputation: 307

Pass value from one function to another based on a condition in react js

I need to pass the provider id to delete function to delete the data sending the id directly to the function works fine but i need to enable another div to get confirmation like ok and cancel after clicking ok i need to delete it, but the function doesnot passing the values to enable it .

my delete function call is :

<td><Icon icon={editIcon} width="20px"/>&nbsp;&nbsp;<Icon icon={deleteIcon} onClick={() => this.onDeletedata(providerData.providerId)} width="20px"/></td>

I am sending the providerId as argument this onclick also enable another div which is confirmation div that is:

 <div id="modaldlt" style={{ display: (deleting ? 'block' : 'none') }}>
          <span className="font-weight-medium" id="name"> Are you Sure want to Delete ? </span>         
          <button onClick={() => this.setState({ deleting: !deleting })}  className="btn btn danger">Cancel</button>
          <button onClick={() => this.onConfirmDelete()} id="ok-btn" className="btn info">Ok</button>                  
        </div>

The providerId is only in the onDeleteData function i need to pass it to onConfirmDelete if the ok button is Clicked

my funtion is:

onDeletedata = (providerid) => {
    this.setState({ deleting: !this.state.deleting })
    console.log(providerid)
    this.onConfirmDelete(providerid);  

  }

The providerId should pass to onConfirmDelete only if the OK button is clicked. plz sort out

Upvotes: 0

Views: 230

Answers (3)

Shankar Nanda
Shankar Nanda

Reputation: 139

  1. Create a temp variable which store deleted values after onDeleteData. and don't call onConfirmDelete there.
  2. Then on the onconfirmDelete store temp values to origin value. Otherwise empty the temp variable.

Upvotes: 0

iamhuynq
iamhuynq

Reputation: 5529

You can useState for your providerid

const [providerIDState, setProviderIDState] = useState(null);

and use providerIDState as parameter of your onConfirmDelete func

and you setProviderIDState in onDeletedata func 

onDeletedata = (providerid) => {
this.setState({ deleting: !this.state.deleting })
console.log(providerid)
setProviderIDState(providerid);
}

Upvotes: 1

sourav satyam
sourav satyam

Reputation: 986

So onDeletedata is for opening the delete confirmation modal, and onConfirmDelete is actually you are deleting the data on clicking the Ok button

onDeletedata = (providerid) => { 
        this.setState({ deleting: !this.state.deleting })
        console.log(providerid)
        this.onConfirmDelete(providerid); // 

      }

But you are calling onConfirmDelete while clicking the icon for confirmation.

  1. Remove onConfirmDelete from onDeletedata method.
  2. Initialize a state that will update with the provider Id to be deleted
  3. onConfirmDelete delete with the state provider id

else you can use the deleting state to store the provider id and check if deleting state doesn't have value that you have initialized earlier.

Something Like this

this.state = {deleting: 0} //initialize it to 0
onDeletedata = (providerid) => {
    this.setState({ deleting: providerid })
} 




<div id="modaldlt" style={{ display: (this.state.deleting ? 'block' : 'none') }}>
              <span className="font-weight-medium" id="name"> Are you Sure want to Delete ? </span>         
              <button onClick={() => this.setState({ deleting: 0 })}  className="btn btn danger">Cancel</button>
              <button onClick={() => this.onConfirmDelete()} id="ok-btn" className="btn info">Ok</button>                  
            </div>

Upvotes: 0

Related Questions