Morgana Freeman
Morgana Freeman

Reputation: 81

dialog causes error Accessing element.ref was removed in React 19

I'm using primereact with nextjs but i get error Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.. so i guess the dialog component is using some ref but i don't know how to solve this issue, the dialog contains a form and the form is actually functional regardless of the error, is it safe to ignore it ?

Table.js


const Table = ()=>{
  const [userDialog, setUserDialog] = useState(false);

  const openCreateUserDialog = () => {
    setUserDialog(true);
  };

  const leftToolbarTemplate = () => {
    return (
      <div className="flex flex-wrap gap-2">
        <Button
          label={t("adminTeamPage.new.title")}
          icon="pi pi-plus ml-1"
          severity="success"
          onClick={openCreateUserDialog}
        />
      </div>
    );
  };

return(
     <CreateUser userDialog={userDialog} setUserDialog={setUserDialog} />
)

}

CreateUser.js

const CreateUser = ({ userDialog, setUserDialog })=>{

return(
    <Dialog
      visible={userDialog}
      header={t("adminTeamPage.new.title")}
      modal
      onHide={() => {
        if (!userDialog) return;
        setVisible(false);
      }}
      className="p-fluid container-md px-0"
    >
      <p> some dialog content
    </Dialog>
)
}

Upvotes: 2

Views: 871

Answers (1)

npm install --save-dev @ant-design/v5-patch-for-react-19

Upvotes: -1

Related Questions