I am trying to add react component that gets a notifications list with Ajax using axios, on a web page.

I'm getting an error #152, which tells me I'm rendering nothing. But when I console log the notifications inside renderItems (inside the map loop), I can see the notifications as I expect it to be.

Here is my code:

'use strict';
const e = React.createElement;

const NofiticationSingle = ({item}) => {
    <li>
        <p>
            {item}
        </p>
    </li>
}

class Notifications extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            notifications : [],
        }
    }

    componentDidMount() {
        const url = ajax_object.url;
        let data = {action: 'get_notifications'};
        let currentComponent = this;
        axios.post(url, Qs.stringify(data))
            .then(function (response) {
                let data = response.data;
                currentComponent.setState({
                    notifications : data.notifications
                })
            })
            .catch(function (error) {
                console.log(error);
            });

    }

    renderItems(){
        return this.state.notifications.map((notification) => (
                <NofiticationSingle key={notification.id} notification={notification} />
        ))
    }

    render(){
        return (
            <ul>
                {this.renderItems()}
            </ul>
        )
    }
}

const notificationsDomContainer = document.querySelector('#goes');
ReactDOM.render(e(Notifications), notificationsDomContainer);

CodePudding user response：

Oh you are missing a return statement here, or you have extra {} brackets:

const NofiticationSingle = ({item}) => {
    <li>
        <p>
            {item}
        </p>
    </li>
}

You shall either introduce explicit return statement, or just wrap your result with brackets, like:

const NofiticationSingle = ({item}) => {
    return <li>
        <p>
            {item}
        </p>
    </li>;
})
---
const NofiticationSingle = ({item}) => (
    <li>
        <p>
            {item}
        </p>
    </li>
)