Search results

React hooks with Dialog in React Dialog component

30 Jan 2023 / 1 minute to read

You can show the Dialog by using the React state change hook with Visible property. In the below example, we have rendered the React JSX component as content of Dialog component.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';
import * as React from 'react';
function App() {
    const [name, setName] = useState('');
    const [visibility, setDialogVisibility] = useState(true);
    function handleClick() {
        setDialogVisibility(true);
    }
    function dialogClose() {
        setDialogVisibility(false);
    }
    return (<div>
      <div className="control_wrapper" id="control_wrapper">
        <button className="e-control e-btn dlgbtn" onClick={handleClick} id="dialogBtn">
          {' '}
          Open
        </button>
        <DialogComponent id="defaultdialog" showCloseIcon={true} visible={visibility} close={dialogClose} header="Textbox">
          <div>
            <div>
              <div> Enter your content </div>
            </div>
            <div>
              <div>
                <TextBoxComponent placeholder="Enter Name" value={name} input={(e) => setName(e.value)}></TextBoxComponent>
                <div>Entered content: {name}</div>
              </div>
            </div>
          </div>
        </DialogComponent>
      </div>
    </div>);
}
export default App;
Copied to clipboard
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';
import * as React from 'react';

function App() {
  const [name, setName] = useState('');
  const [visibility, setDialogVisibility] = useState(true);
  function handleClick() {
    setDialogVisibility(true);
  }
  function dialogClose() {
    setDialogVisibility(false);
  }
  return (
    <div>
      <div className="control_wrapper" id="control_wrapper">
        <button
          className="e-control e-btn dlgbtn"
          onClick={handleClick}
          id="dialogBtn"
        >
          {' '}
          Open
        </button>
        <DialogComponent
          id="defaultdialog"
          showCloseIcon={true}
          visible={visibility}
          close={dialogClose}
          header="Textbox"
        >
          <div>
            <div>
              <div> Enter your content </div>
            </div>
            <div>
              <div>
                <TextBoxComponent
                  placeholder="Enter Name"
                  value={name}
                  input={(e) => setName(e.value)}
                ></TextBoxComponent>
                <div>Entered content: {name}</div>
              </div>
            </div>
          </div>
        </DialogComponent>
      </div>
    </div>
  );
}
export default App;