Growl: messages appears again on any change state

[RushPVA]

Example(modified demo growl page)

export class MessagesDemo extends Component {

    constructor() {
        super();
        this.state = {messages: null, test: ''};
        this.showSuccess = this.showSuccess.bind(this);

    }

    showSuccess() {
        this.setState({messages:[{severity:'success', summary:'Success Message', detail:'Order submitted'}]});
    }

   
    render() {
        return(
            <div className="ui-g">
                <div className="ui-g-12">
                    <div className="card">
                        <h1>Growl</h1>
                        <Growl value={this.state.messages} />
           
                        <Button onClick={this.showSuccess} label="Success" style={{width:'100px'}} className="green-btn" />

                    </div>

                    <div className="card">
                        <h1>Invalid Field</h1>
                        <span className="md-inputfield">
                            <InputText className="ng-dirty ng-invalid" placeholder="Invalid" onInput={(e) => this.setState({test: e.target.value})}/>
                            <div className="ui-message ui-messages-error ui-corner-all">
                                This field is required
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        )
    }
}

To reproduce issue click 'Success' button, then try to change input. On every input change message appears again.

[RushPVA]

i suppose the same behaviour will be in Messages component

[RushPVA]

dirty workaround:
componentDidUpdate() {
this.state.messages = [];
}

[cagataycivici]

I've rewritten Growl with a different approach which is common in React ecosystem;

#202

It also fixes this issue.

Will also do it for messages.

[RushPVA]

Well done!!!
P.S. on my projects i use both Angular and React and your library(primeng and primereact) makes my life easier. Thank you very much.