jsx console log inside map inside return statement

Question

I'm working inside a stateless function controller in React. I'm trying to do a console.log inside a map that is inside a return statement. This works:

{options.map(o => (
   {console.log(o)}
))}

And this works:

return (
   <>
      //more html/jsx code
      {console.log("test")}
      //more html/jsx code
   </>
)

But how to log inside a map that is inside a return statement? like so:

return (
   //more html/jsx code
   {options.map(o => (
      <>
         {console.log(o)} //doesn't compile
         console.log(o) //doesn't work -> written in DOM
      </>
   ))}
   //more html/jsx code
)

Anyone have an idea if this is possibly at all. I find many answers articles/questions where they do 1 of the 2. Or in a map or in a return statement. Can't seem to find an answer that is both in a return statement and a map. I, ofcourse, only use console.log for testing purposes

ArtDev · Accepted Answer · 2020-02-19T20:27:41.653

3

You are still able to console inside the map function. But you should put console.log out of return JSX element.

const array = ['test', 'item2', 'item3'];
array.map(item => {
  console.log(item) // put your console here.
  return (
    <>{item}</>
  )
})

This will be duplicated with this question

edited Feb 19 '20 at 20:27

answered Feb 19 '20 at 13:52

ArtDev

46
4

Ignoring the "you shouldn't do a console.log inside a map inside return statement". Is it possible, and if so, how? – control-panel Feb 19 '20 at 14:58
As you can see I am loggin console inside map function. – ArtDev Feb 19 '20 at 20:21
Anyone can try to log inside the map function to see iteration item. – ArtDev Feb 19 '20 at 20:21
In your answer the map is ***not*** wrapped inside a return statement, but the return is wrapped inside the map. I'm asking the reversed like explained in my 3th code block in my question. – control-panel Feb 20 '20 at 08:53
I am just wondering why you need to put a console inside the return function. Is there any reason you should do that? @control-panel – ArtDev Feb 20 '20 at 21:31
solely for testing purposes – control-panel Feb 21 '20 at 10:09

score 1 · Answer 2 · answered Feb 19 '20 at 13:42

You are making an implicit return in this map here and returning multiple nodes at the same level. They should always be contained into one single node, so this:

return (
   {options.map(o => (
      {console.log(o)} //doesn't compile
      {console.log(o)} //doesn't work -> writes in DOM
   ))}
)

Should be changed to this: (notice the use of React.Fragment or <>)

return (
   {options.map(o => (
      <>
        {console.log(o)}
        {console.log(o)}
      </>
   ))}
)

Which makes a single node out of the output and lets react render properly.

Anyway, I don't recommend retuning console.log anytime in React, you could instead do the console logs and return a null so React knows that there's nothing to render in there.

return (
   {options.map(o => {
      console.log(o)
      return null;
   })}
)

There is content in my return statement, i just filtered it out to give the essence of the problem. I will make it more clear. — control-panel, Feb 19 '20 at 13:44

jsx console log inside map inside return statement

2 Answers2