I'm having some problems with installing react-alert, it's showing error like
react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead.
So I run command in cmd npm install react-alert react-alert-template-basic react-transition-group
This is how my App.js looks like.
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import { Provider } from 'react-redux';
import store from '../store';
const alertOptions = {
timeout: 3000,
position: "top center"
};
class App extends Component {
render() {
return (
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvider>
</Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
And I have added component Alers.js and it looks like.
import React, { Component, Fragment } from 'react';
import { withAlert } from 'react-alert';
export class Alerts extends Component {
componentDidMount() {
this.props.alert.show("It works");
}
render() {
return <Fragment />;
}
}
export default withAlert(Alerts);
So in Alert.js, I added componentDidMount() to test is this working (obviously not).
And if I delete <Alerts />
from App.js I don't have any errors but Alerts is not working in that way.
export default withAlert()(Alerts)
– devserkan