reactjs - 'withAlert' is showing "Objects are not valid as React Child" Error

Question

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!

标签： reactjs

Answer 1

Replace this:

withAlert(Alerts)

by this

withAlert()(Alerts)