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;
How to use Growl component in typescript
-
- Posts: 5
- Joined: 21 May 2019, 18:33
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.
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:
Code: Select all
class App extends React.Component<IProps, IState> {
private growl: Growl;
constructor(props: IProps) {
super(props);
this.state = {
currentUser: {
email: 'user@xxx.com'
}
};
this.growl = new Growl({}); // <---- Note the change in this line.
}
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.
I've tried to do the same, but
Code: Select all
show
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
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1