How to Open Dialog Component from Parent?

Jacob Graf 0
Viewed 34

I need to be able to open a Headless UI Dialog component from its parent. How do I accomplish this?

Trigger Headless UI Dialog Component from Parent

headless-ui next.js reactjs
1 Answers

import React, { useState } from "react";
import ModalStandard from "./components/modals/ModalStandard";

const Playground = () => {
  const [isTriggered, setIsTriggered] = useState(false);
  return (
    <>
      {isTriggered && (<ModalStandard isOpen={true}>This is my standard modal.</ModalStandard>)}
      <div>
        <button
          onClick={() => {setIsTriggered(true);}}
          className="cursor"
        >
          open Modal
        </button>
      </div>
    </>
  );
};

export default Playground;

onClick of the open Modal button -> set a state variable to true, which tracks if button is clicked to render the component conditionally, for conditional rendering : use && operator , which renders the right hand side component only if left hand side of the operator evaluates to trueenter image description here

Anusha Palle0
Related