Reacjs- Popup : How do I trigger a Popup without it being click/hover?

Question

When receiving a erro.message === '2 factory code incorrect' I wish to show a popup. The logic is fairly simple, however, I cannot figure out how to make this popup listen to a boolean somewhere ,how do I make it listen to a boolean value somewhere?

Fairly simple component here:

  import React, { useState, useEffect } from 'react';
import { ErrorMessage, useField } from "formik";
import { StyledTextInput, StyledLabel, StyledIcon, ErrorMsg } from "./Styles";

// Eye for password
import { FiEyeOff, FiEye } from "react-icons/fi";
import Popup from "reactjs-popup";

function MyComponent() { 
  const [state, setState] = useState();
  setState(true);
  return (
    <Popup model> <span> teste</span> </Popup>
  );
}

export const TextInput = ({ icon, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    if(meta.error){
    setShowPopup(true);
    }
  }, [meta.error])
  
  return (
    <div style={{ position: "relative" }}>
      <StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
      {props.type !== "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
        />
      )}
      {props.type === "password" && (
        <StyledTextInput
          invalid={meta.touched && meta.error}
          {...field}
          {...props}
          type={showpass ? "text" : "password"}
        />
      )}
      <StyledIcon>{icon}</StyledIcon>
      {props.type === "password" && (
        <StyledIcon onClick={() => setShowpass(!showpass)} right>
          {showpass && <FiEye />}
          {!showpass && <FiEyeOff />}
        </StyledIcon>
      )}
      {meta.touched && meta.error ? (
        <ErrorMsg>{meta.error}</ErrorMsg>
      ) : (
        <ErrorMsg style={{ visibility: "hidden" }}>.</ErrorMsg>
      )}
      <Popup style={{visibility: "hidden"}}></Popup>    

    </div>
  );
};
  

Answer 1

I didn't get where the Popup component is defined, but the idea it should be like this:

const [showPopup, setShowPopup] = useState(true);

useEffect(() => {
  if (yourcondition meets criteria) {
    setShowPopup(!showPopup);
  }
}, [yourcondition]);


<Popup disabled={showPopup} ... />

With that, when some dependency like "yourcondition" (it could be some value from store, redux, Context, a prop, another state, etc) changes, and it meets the criteria that you want (for instance if (yourcondition === 'no' or whatever) {, or if (!yourcondition) { , etc, then useEffect will set disabled (or show, I don't know the Popup component props) the Popup to false if it was true.

Answer 2

You are on the correct way. Just change the prop name.

It's open and onClose,

<Popup open={show} onClose={() => setShow(false)}>

Reference: https://react-popup.elazizi.com/component-api