CODEWITHSUNDEEP
reactjsincludestate
CourtneyJ
CourtneyJ

Reputation: 508

Modal popping up at the wrong time due to state

So I have two modals that I am using one of them was already implemented and behaves as expected however when I've added the other modal depending on the condition of if there is any true value when mapping over the array the way it works right now both modals show when there is a true value. I think this is because there are multiple false values returned from my .includes() function before the true appears. I think a good solution for this would be to make an array of all the values returned when I run .includes() on the entries then I can check that array for any true values but I cant seem to get the values into an array. When I try and push them into an array they just all push into their own separate arrays. This may be the wrong approach if it is can you explain what a better approach would be:

const checkPending = () => {
    if(entries){
      entries.map(descriptions => {
        const desc = descriptions.description
        //check if there are any pending tests
        const check = desc.includes("pending")
       //if the check returns true show the pending modal if it doesnt set the other modal to true
        if(check === true){
          setShowModal(false)
          setShowPendingM(true)
         
        }else{
          setShowModal(true)
        }
      })

    }
  }

    return(
         <Button
          onClick={() => checkPending()}
          className={`${styles.headerButton} mr-2`}
           >
          Add File&nbsp;&nbsp;
          <Plus />
        </Button>
)

setShowModal & setShowPendingM are both passed from a parent component as props. They are both initialized as false. The most straightforward question I can pose is is there any way to say if there are any true values returned from .includes then do something even if there are false values present

Upvotes: 0

Views: 77

Answers (1)

Noah Gaeta
Noah Gaeta

Reputation: 181

I think this is how your checkingPending method should look like.

const checkPending = () => {
    if(entries){
      let pending = false;
      entries.forEach((descriptions) => {
        const desc = descriptions.description
        if(desc.includes('pending')){
            pending = true;
        }
      });
      if(pending) {
          setShowModal(false);
          setShowPendingM(true);
      } else {
          setShowModal(true);
          setShowPendingM(false);
      }
    }
  }

Let me know if you have any additional questions.

Upvotes: 1

Related Questions