Q:

How to display a dialog when a button is clicked using react and typescript?

i want to display a dialog to the bottom right corner of the page on clickin a button using react and typescript.
There is a button named "Add" in ListComponent. when clicking that button dialog which is the DialogComponent should be rendered.
Below is how the ListComponent and DialogComponent looks
function ListComponent() {
    const onAddClicked = () => {
        //what to be done
    }
    return (
        <button onClick={onAddClicked}> Add</button>
    );
 }

 function DialogComponent() {
     return (
         <Wrapper> Dialog </Wrapper>
     )
 }

Now i cannot call DailogComponent within ListComponent as it would push the layout of the page.
So i want to call this DailogComponent within MainComponent which is something like below
function Main () {
    return (
        <ListComponent>
            //some props
        </ListComponent>
    )
 }

I am new to using react with typescript. How can i do this. could someone provide some insights into this. thanks.

A:

You will likely want to use fixed positioning (and possibly some increased z-index, if necessary) to display a dialog box at the bottom right of the screen. This will "break" it out of being rendered "inline" with your content.
At a minimum you should utilize the following CSS rules
position: fixed;
bottom: <M>; // M units from the bottom
right: <N>; // N units from the right

The linked codesandbox sets this Dialog class style and component
CSS
.dialog {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 1rem;
  border-radius: 5px;
  background-color: lightblue;
}

JSX
const Dialog = ({ showDialog, text }) =>
  showDialog ? <div className="dialog">{text}</div> : null;

How you toggle the display state of the dialog is up to you.
EDIT: Full code with a demo ListComponent
const Dialog = ({ showDialog, text }) =>
  showDialog ? <div className="dialog">{text}</div> : null;

const ListComponent = ({ data, toggleDialog }) =>
  data.map((el, i) => (
    <div key={i}>
      <button type="button" onClick={toggleDialog}>
        {el}
      </button>
    </div>
  ));

export default function App() {
  const [showDialog, setShowDialog] = useState();

  const toggleDialog = () => setShowDialog(s => !s);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button type="button" onClick={toggleDialog}>
        Toggle Dialog in Main
      </button>

      <h2>List Component</h2>
      <ListComponent data={["A", "B", "C"]} toggleDialog={toggleDialog} />

      <Dialog showDialog={showDialog} text="I'm a dialog" />
    </div>
  );
}

This is essentially applying Lifted State. State and mutators are lifted to a common ancestor of components interested in either displaying the state, or updating. State and state updaters are passed as props to children.

