console.log inside a map in react component

Question

I have a react component, and I need debug the value of 'customer' element that 'map' produce "customers.map( customer =>".

I've tried before "" this

{ console.log (customer)}

but i get error, here the component:

const CustomersList = ({ data: {loading, error, customers }}) => {
    if (loading) {
        return <p style={{color:"red"}}>Loading ...</p>;
    }
    if (error) {
        return <p>{error.message}</p>;
    }

    return (
        <div>
            Customers List
            { customers.map( customer =>
                (<div  key={customer.id} >Hey {customer.firstname}</div>)
            )}
        </div>
    );
};

Answer 1

Use {} with arrow function for block body and put the console.log inside that, with block body you need to use return to return the ui elements.

Like this:

{ 
    customers.map( customer => {
        console.log(customer);
        return <div  key={customer.id} >Hey {customer.firstname}</div>
    })
}

As per MDN DOC:

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.

Example:

var func = x => x * x;                  
// concise syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed