I have this problem with React and react-alert
here I make the call, the AlertProvider and Alerts, the latter is a file, where I configure the Alerts, but I generate an error, in the console I get the error the of title:
Uncaught 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.
and it disappears when I put it in comment
Codigo App.js
import React, {Component, Fragment} from 'react';
import ReactDOM, { render } from 'react-dom';
import { transitions, positions, 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';
// Alert Options
const options = {
timeout: 3000,
position: "top center"
}
class App extends Component{
render() {
return (
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...options}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvider>
</Provider>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
the problem is present when I call in the App.js
codigo Alerts.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 {
static propTypes = {
error: PropTypes.object.isRequired
}
componentDidUpdate() {
this.props.alert.show("It Works");
}
render() {
return <Fragment />;
}
}
const mapStateToProps = state => ({
error: state.errors
});
export default connect(mapStateToProps)(withAlert(Alerts));
withAlert()(Alerts), notwithAlert(Alerts). - lawrence-witt