I am using react-alert and I am getting an error which says:
Error: 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.
in Unknown (at App.js:24)
in Provider (at App.js:21)
in Provider (at App.js:20)
in App (at src/index.js:12)
in StrictMode (at src/index.js:11) "
The 'Unknown' is my Alerts component which I was testing out to see if it shows errors as an alert.
Alert.js
import React, { Component, Fragment } from "react";
import { withAlert } from "react-alert";
import { connect } from "react-redux";
import PropTypes from "prop-types";
export class Alerts extends Component {
componentDidMount(){
this.props.alert.show("It works")
}
render() {
return (
<Fragment />
);
}
}
export default withAlert(Alerts);
App.js const alertOptions = { timeout: 3000, position: "top center", };
class App extends Component {
render(){
return (
<Provider store={store}>
<AlertProvier template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvier>
</Provider>
);
}
}
export default App;
When I remove the 'withAlert' from "export default withAlert(Alerts)" inside my Alerts.js, the errors are gone but obviously, I can't see the errors. What shall I do to fix this and use react-alert properly? Thanks!