Cannot use Dropdown/Modal from Semantic UI in Next.js

Question

I cannot use Dropdown/Modal from Semantic UI in Next.js. The code below can't work properly (no response when clicking the button)

'use client';

import Image from "next/image";
import * as React from "react";
import { Button, Header, Modal, Icon } from "semantic-ui-react";

export default function Home() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="centered">
      <Icon size="massive" name="world" />
      <div className="separator" />
      <Modal
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
        trigger={<Button>Show Modal</Button>}
      >
        <Modal.Header>Select a Photo</Modal.Header>
        <Modal.Content image>
          <span style={{ marginRight: 21 }}>
            <Image src="/image.png" width={400} height={266} />
          </span>
          <Modal.Description>
            <Header>Default Profile Image</Header>
            <p>
              We've found the following gravatar image associated with your
              e-mail address.
            </p>
            <p>Is it okay to use this photo?</p>
          </Modal.Description>
        </Modal.Content>
        <Modal.Actions>
          <Button color="black" onClick={() => setOpen(false)}>
            Nope
          </Button>
          <Button
            content="Yep, that's me"
            labelPosition="right"
            icon="checkmark"
            onClick={() => setOpen(false)}
            positive
          />
        </Modal.Actions>
      </Modal>
    </div>
  );
}

I've googled a lot, but cannot find any examples with Semantic UI with the APP router. Please help.

Answer 1

Add onClick={() => setOpen(true)} into your trigger button

trigger={<Button>Show Modal</Button>} to trigger={<Button onClick={() => setOpen(true)}>Show Modal</Button>}

Codesandbox: https://codesandbox.io/p/devbox/demo-next-cx577m?file=%2Fapp%2Fpage.tsx%3A3%2C32

Answer 2

I see that you should adjust your state management and handle correctly the button status modal for onClose, onOpen.

export default function Home() {
  const [open, setOpen] = useState(false);

  return (
    <div className="centered">
      <Icon size="massive" name="world" />
      <div className="separator" />
      <Modal
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
        trigger={<Button>Show Modal</Button>}
      >
        <Modal.Header>Select a Photo</Modal.Header>
        <Modal.Content image>
          <span style={{ marginRight: 21 }}>
            <Image src="/image.png" width={400} height={266} alt="Profile Image" />
          </span>
          <Modal.Description>
            <Header>Default Profile Image</Header>
            <p>
              We've found the following gravatar image associated with your
              e-mail address.
            </p>
            <p>Is it okay to use this photo?</p>
          </Modal.Description>
        </Modal.Content>
        <Modal.Actions>
          <Button color="black" onClick={() => setOpen(false)}>
            Nope
          </Button>
          <Button
            content="Yep, that's me"
            labelPosition="right"
            icon="checkmark"
            onClick={() => setOpen(false)} // Ensure onClick handler
            positive
          />
        </Modal.Actions>
      </Modal>
    </div>
  );
}