0

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

Jacob Graf
  • 323
  • 1
  • 9
  • 1
    Does this answer your question? [How to trigger child component function](https://stackoverflow.com/questions/65581881/how-to-trigger-child-component-function) – Njuguna Mureithi Sep 06 '22 at 16:00
  • https://stackoverflow.com/a/65582073/1418750 – Njuguna Mureithi Sep 06 '22 at 16:00
  • No, I'm not looking to conditionally show/hide the modal component. I'm looking to trigger the native open/close state in the child ModalStandard component from the parent Playground component. – Jacob Graf Sep 06 '22 at 19:05
  • Did you actually check out the link? Because there is nowhere it talks about 'conditionally show/hide the modal component'. – Njuguna Mureithi Sep 06 '22 at 19:14
  • Yeah I did. It was just use effect hooks to toggle an element based on the visible property. It had nothing to do with how to accomplish what I’m trying to accomplish with Headless UI. At least not that I could figure out! – Jacob Graf Sep 06 '22 at 22:32
  • Then your question is not clear – Njuguna Mureithi Sep 07 '22 at 07:06

1 Answers1

-1

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 Palle
  • 9
  • 3
  • 1
    I'm not looking to conditionally show/hide the modal component. I'm looking to trigger the native open/close state in the child ModalStandard component from the parent Playground component. – Jacob Graf Sep 06 '22 at 16:58
  • try creating a method/function in child ModalStandard component which can change the state and Create a reference for the child component in parent component using React.createRef() then Attach reference with the child component using ref={}. Call the child component method using this.your-reference.current.method. – Anusha Palle Sep 07 '22 at 07:43