0

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

CourtneyJ
  • 458
  • 6
  • 19
  • There is a lot to unpack here. 1.) you should not be using the array `map` method if you aren't returning anything. You should use `forEach` 2.) You probably shouldn't be setting state like that, you should only set the state once the loop finishes. 3.) You are not using `let` correctly, you should use `const` where you do not re-initialize the variable 4.) The logic just doesn't look okay to me, I can't debug your code without getting more context though. – Noah Gaeta Jan 13 '21 at 21:37
  • And no, the `includes` method will return true as soon as it finds the value you pass in. – Noah Gaeta Jan 13 '21 at 21:46
  • Your `if` conditions are not mutually exclusive, in other words the code in both `if` blocks can be executed. You may want `else` there, but it's late here and tbh and I can't quite follow your logic. I'm also confused about what you think `includes` returns, which is never an array, but a boolean value. – hotpink Jan 13 '21 at 21:49
  • I can fix the `let` `const` issues. I am a new developer so excuse my mistakes please. I know that the `includes` returns a boolean. If I were to place my if statement outside of my map function Im not sure how Id do that and still use the variables Ive set inside. May I ask what context can I add that will be helpful? – CourtneyJ Jan 13 '21 at 21:52
  • What I am trying to say in my logic is map over this array of object. When you receive each object take out the description of the object. Then if any of the descriptions contain the word 'pending' set the state to show modalTwo or `setShowPendingM(true)` and if none of them are true set `setShowModal(false)`. – CourtneyJ Jan 13 '21 at 21:58

1 Answers1

1

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.

Noah Gaeta
  • 181
  • 5