3
votes

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));
1
Which specific line is throwing an error? Edit: look at the documentation, you should be calling withAlert()(Alerts), not withAlert(Alerts). - lawrence-witt

1 Answers

0
votes

yes, I can solve changing the

withAlert (Alerts) 

by

withAlert()(Alerts)

Thanks