Prime Community Forum

Hi,

Please suggest how to use the Growl component in typescript project.

Below is my code from App.tsx.

import { Growl } from 'primereact/growl';

type IProps = {};

type IState = {
currentUser: {
email: string;
};
};

class App extends React.Component<IProps, IState> {
private growl: Growl;
constructor(props: IProps) {
super(props);

this.state = {
currentUser: {
email: 'user@xxx.com'
}
};

this.growl = React.createRef<Growl>();
}

public componentDidMount() {
this.growl.show({
severity: 'success',
summary: 'Success Message',
detail: 'Order submitted'
});
}

public render() {
return (
<div>
<Growl ref={el => (this.growl = el)} />
</div>

);
}
}

export default App;

So, for future reference, do you mind using code tags? It makes things a lot easier to read.

It looks like the issue here is that you're using React.createRef. React.createRef is for creating a reference to a DOM element or a React component. You typically only use this for interacting with third-party, DOM based libraries or for managing the DOM directly (video output, maybe?). You should be using the below instead:
EDIT: originally forgot the empty props in the Growl constructor.

I'm also trying to figure out how to use the Growl component in typescript.

I've tried to do the same, but method doesn't exist?!

Is there a references/example anywhere? The javascript example just doesn't translate to typescript.

Example is right here how to use Growl and control it: https://github.com/primefaces/primereac ... owlDemo.js