Error toast is not defined

[rizarefaldi]

Hello, i am adding next lines:

Code: Select all

import { Toast } from 'primereact/toast';

<Toast ref={toast} />

and ukuran 4x6

Code: Select all

toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});

in a function that i want show the toast but i am getting this error: 'toast' is not defined'

am i forgetting something?

[mert.sincan]

Hi,
Interesting! It works fine for me. Please see our demo;
https://codesandbox.io/s/grp5c

Best Regards,

[mcandu]

Did you add,

Code: Select all

const toast = useRef(null);

[TheVoid]

Hi,
I too run in a problem with the toast example.
I create a new react with typescript project => npx create-react-app efeu-portal-prime --template typescript and added the code below.
The error is
ERROR in src/App.tsx:18:24
TS2339: Property 'show' does not exist on type 'never'.
Any hints?

Regards
Jürgen

Code: Select all

import React, { useRef, useState } from 'react';
import logo from './logo.svg';
import './App.css';

import { InputText } from "primereact/inputtext";
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';

import "primereact/resources/themes/lara-light-indigo/theme.css";  //theme
import "primereact/resources/primereact.min.css";                  //core css
import "primeicons/primeicons.css";                                //icons

function App() {
  const [text, setText] = useState("Hallo");
  const toastRef = useRef(null);

  const showToast = (severityValue: string, summaryValue: string, detailValue: string) => {

    toastRef?.current?.show({ severity: severityValue, summary: summaryValue, detail: detailValue });
  }

  const onButtonClick = () => {

    if (text) {
      showToast("severityValue", "summaryValue", "detailValue");
    }
  }

  return (
    <div className="App">
      <Toast ref={toastRef}></Toast>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <InputText value={text} onChange={e => setText(e.target.value)}></InputText>
        {text}
        <Button type='button' label='Save' icon="pi pi-check" onClick={onButtonClick}></Button>
      </header>
    </div>
  );
}

export default App;

[Melloware]

Please put together a Code Sandbox reproducer showing the issue using my starter PrimeReact template: https://codesandbox.io/s/primereact-test-forked-bbns8k

[vekanoid]

TS2339: Property 'show' does not exist on type 'never'.

I have the same problem.
Looks like Toast methods are not visible from toast.current.
Maybe that is because I am using react with Typescript in combination or there is some bug in primereact lib?

[vekanoid]

Please put together a Code Sandbox reproducer showing the issue using my starter PrimeReact template: https://codesandbox.io/s/primereact-test-forked-bbns8k

I tried from the template and it works fine there, but in my project I have problem with show method like mentioned above.
Can you try with React project with typescript instead of javascript?

[Melloware]

Sorry use my Vite stackblitz its all TypeScript using PrimeReact similar to Code Sandbox.

https://stackblitz.com/edit/vitejs-vite ... ckage.json

[vekanoid]

Sorry use my Vite stackblitz its all TypeScript using PrimeReact similar to Code Sandbox.

https://stackblitz.com/edit/vitejs-vite ... ckage.json

Thank you Melloware, I found what is problem. In your example from the link I see toast const is defined like this:

Code: Select all

const toast = useRef<Toast>(null);

And with that everything works fine. If I use example from primereact documentation https://www.primefaces.org/primereact/toast/

Code: Select all

const toast = useRef(null);

That will not work with typescript.
In your documentation (TS Source) there is no defined type for useRef and that is the reason why show method is not visible and why people have problem.
Please update documentation for primereact Toast section.

[Melloware]

Oh yes all the Typescript examples are not correct see: https://github.com/primefaces/primereact/issues/2490