React map item shows nothing

Question

import React from 'react';
import "./css/App.css"


const App= () =>{
  const test=["1","2"];
  return
    test.map((item)=>{
      return
        <div key={item} >{item}</div>
    })
}

export default App;

This is so weird. I checked the console and it doesn't say anything. Please kindly advise me what mistake I 've made or what possibilities would cause this. Thanks.

Is there a new-line between the `return` and the `test.map(...` in your actual code, or is that a formatting error in the snippet? — DBS, Jun 17 '22 at 08:46
Does this answer your question? [Why doesn't a Javascript return statement work when the return value is on a new line?](https://stackoverflow.com/questions/8528557/why-doesnt-a-javascript-return-statement-work-when-the-return-value-is-on-a-new) — DBS, Jun 17 '22 at 08:47

score 2 · Accepted Answer · answered Jun 17 '22 at 09:05

You have a bracket problem. If you want to return something without using brackets, you have to write the logic in one single line. The logic that you write in subsequent lines won't be validated inside that return statement.

Also, you need a parent element wrapped around your map statement to actually let the DOM know what to use as a parent container to hold all your map elements.

For example:-

return test.map(item => <div key={item}>{item}</div>)

in terms of what the DOM sees is :-

<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
<div key={item}>{item}</div>
...

As you can see, the DOM has no idea what to use as a parent container to wrap all these <div> statements in.

Therefore, you can use React.Fragment or simply <></> to wrap your map statement around.

The reason why you aren't seeing any error logs is because this isn't actually an error but a wrong way of writing your logic. The DOM does not know the output of your map statement. Therefore, it throws no errors. If however, you were to write multiple <div> statements just like I mentioned above instead of a map statement, you would get errors while writing the code in a proper code editor, example: VS Code.

A proper way of writing your code would be:

import React from 'react';
import "./css/App.css"


const App= () =>{
  const test=["1","2"];
  return(
    <>
    {test.map(item => <div key={item}>{item}</div>)}
    </>
  );
}

export default App;

I think in this case fragment is not needed because he is returning **array**, not JSX. https://stackblitz.com/edit/react-jx21cg?file=src%2FApp.js,src%2Findex.js — Giorgi Moniava, Jun 17 '22 at 09:40

score 1 · Answer 2 · answered Jun 17 '22 at 08:50

1

try this->

const App = () => {
  const test=["1","2"];

  return(
   <div>
    test.map((item)=>{
      return(<div>
            <div key={item}>{item}</div>
          </div>)
    }))
   </div>
}

answered Jun 17 '22 at 08:50

mordor619

154
11

Tushar Shahi · Answer 3 · 2022-06-17T09:34:14.513

0

You can look at the below example to get an idea.

function dot(){
return 
2;
}

console.log(dot());

See how JS engine auto adds an ; after return. The engine probably never reaches your code. Because it sees return; it will return from the function.

Also, all React components should return a JSX enclosed in only one element. So please enclose in React fragments.

import React from 'react';
import "./css/App.css"


const App= () =>{
  const test=["1","2"];
  return <>
    test.map((item)=>{
      return <div key={item} >{item}</div>
    })
   </>
}

export default App;

edited Jun 17 '22 at 09:34

answered Jun 17 '22 at 08:47

Tushar Shahi

16,452
1
18
39

May I know what do you mean by never reach the code? – esoteric elf Jun 17 '22 at 08:58
Because it sees `return;` it will return from the function. @user145472 – Tushar Shahi Jun 17 '22 at 09:33
I think in this case fragment is not needed because he is returning **array**, not JSX. https://stackblitz.com/edit/react-jx21cg?file=src%2FApp.js,src%2Findex.js – Giorgi Moniava Jun 17 '22 at 09:42

score 0 · Answer 4 · answered Jun 17 '22 at 09:07

Try this:

import React from 'react';
import "./css/App.css"


const App= () =>{
  const test=["1","2"];
  return (
   test.map((item) => (<div key={item} >{item}</div>))
  )
}


export default App;

As others have pointed out, you need to make sure that the "return" keyword and return value is on the same line.

React map item shows nothing

4 Answers4