I am a beginner in react-js. I have a problem regarding calling the modal from react-bootstrap.

I have a functional component with a return statement which my modal is in it. Also, I have a component with <tr> tag. What I want is when I click a row from my <tr> tag, I want to show my modal.

When I check my console there are no errors returned.

Here is my fullcode :

const [employeeInfoModalShow, setEmployeeInfoModalShow] = useState(false);
    const [employeeInfoModalDismiss, setEmployeeInfoModalDismiss] = useState(false);

    const closeEmployeeInfoModalHandler = useCallback(() => {
        setEmployeeInfoModalShow(false);
    }, [employeeInfoModalShow]);

    const modalDTR = () => {        
        if (!employeeInfoModalDismiss) {
            setEmployeeInfoModalShow(true);
          }
          return (
            <Modal
              size="lg"
              backdrop="static"
              show={employeeInfoModalShow}
              onHide={() => {
                setEmployeeInfoModalDismiss(true);
                setEmployeeInfoModalShow(false);
              }}
              backdropClassName="modalBackdrop"
            >
              {(() => {
                return (
                  <>
                    <Modal.Header closeButton></Modal.Header>
                    <Modal.Body>
                      <p>Test</p>
                    </Modal.Body>
                  </>
                );
              })()}
            </Modal>
          );       
    }    

    const Date_columns = (props) => {
        const [hovered, setHovered] = useState(false);        

        const toggleHover = () => {
            setHovered((prevState) => (!prevState));            
        }        
        
        return (
            <>
              <tr onClick={modalDTR} onMouseEnter={toggleHover} onMouseLeave={toggleHover} className={hovered ? `${classes.trHover}`:''}>
                  <td align="center" className={`${classes.borderBlack}`}>{props.date_column}</td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
              </tr>
            </>
        )
    }

CodePudding user response：

Maybe a simple solution could be this one:

    const Modal = ({ isOpen }) => {
      // Custom Modal logic
         return !isOpen ? null : <>{// JSX Code Here}</>
     }

     const DateColumns  = ({ ...someProps}) => {
        const [isOpen, setIsOpen] = React.useState(false);

        const handleClick = (_event) => setIsOpen(true);

        return (
          <>
            <Modal isOpen={isOpen} />
            <tr>
            <td onclick={handleClick}></td>
           </tr>
         </>
        );
     }

Note: If you have multiple rows, you will need to use something more global and avoid the creation of a modal for each row. React Context could be a good fit if that's the case.