schiehll / react-alert

alerts for React
MIT License
608 stars 98 forks source link

How do I trigger alert without button #73

Closed husnulhamidiah closed 6 years ago

husnulhamidiah commented 6 years ago

So far I can use this module run perfectly with example given in readme. But what I want is display this alert based on another props. Here's what I've try :

<div className='col-sm-4'>
    { this.props.alert.show('msg', { type: 'success' }) }
</div>

It gives me this errors, I use create react app.

Objects are not valid as a React child (found: object with keys {id, message, options, close}). If you meant to render a collection of children, use an array instead.
in div (at App.js:23)
    in div (at App.js:22)
    in div (at App.js:18)
    in div (at App.js:17)
    in App (created by WithAlert(App))
    in WithAlert(App) (at index.js:17)
    in AlertsBroadcast (created by Provider)
    in Provider (at index.js:16)
    in Root (at index.js:21)

So, how do I display alert without button?

schiehll commented 6 years ago

Yeah the way you did it won't work because this.props.alert.show doesn't return a react component, but an object.

If you want it to be triggered by other prop you can use the componentWillReceiveProps method. Something like this:

class Example extends React.Component {
 componentWillReceiveProps(nextProps){
  if (nextProps.someProp) this.props.alert.show('Hey!')
 } 

 render(){
  return <div>Example</div>
 }
}

export default withAlert(Example)

Hope it helps!