CODEWITHSUNDEEP
reactjslaravel-7
Čamo
Čamo

Reputation: 4170

Laravel 7 + React render error: Nothing was returned from render

I have simple react component in Laravel 7 aplication. If I try to write render method it throws me an arror: Nothing was returned from render. If I use only a return() wihtout render it works. What am I doing wrong?

import React from 'react';
import ReactDOM from 'react-dom';

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

    function render() {

        const list = state.list.map(item => {
            <li>{item}</li>
        })

        return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
        )
    }


    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}

export default ItemsList;

if (document.getElementById('itemsList')) {
    ReactDOM.render(<ItemsList />, document.getElementById('itemsList'));
}

Upvotes: 2

Views: 90

Answers (1)

Zayn
Zayn

Reputation: 741

render function is used in class based components, since you are using functional component you don't need render method, just return to render your JSX.

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

        const list = state.list.map(item => {
            // Here this is JSX element so you must return it.
            return (<li>{item}</li>)
        })

return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
<ul>{list}</ul>
        )



    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}

Upvotes: 3

Related Questions