Rendering an array of strings in React

Question

I'm trying to render a flat array of strings in a React app, via the following:

{array.length > 0 ? (
  <div>
    <h5>Email list</h5>
    <div
      style={{
      paddingLeft: "50px",
      float: "left",
      lineHeight: "normal",
      height: "50px",
      width: "300px"
      }}
    >
    {array.map((date, index) => {
    <p key={index}>{date}</p>;
    })}
    </div>
  </div>
) : (<></>)}

I'm struggling to understand why my map function won't render anything on screen. I'm able to console log both date and index just fine, the dates definitely exist within the array and the h5 title renders as it should. However, nothing shows in the div beneath it.

If I remove the map functionality and just print a line of text, that renders. Once I add the map back in, however, it returns to an empty div. No console logs to indicate anything is wrong, either.

Any help appreciated!

Your arrow function isn't returning anything. – DBS Sep 22 '22 at 13:02 — DBS, Sep 22 '22 at 13:02
You need to return the div so you can render it – sayinmehmet47 Sep 22 '22 at 13:15 — sayinmehmet47, Sep 22 '22 at 13:15

score 0 · Accepted Answer · answered Sep 22 '22 at 13:02

0

The map function needs a return statement if you are adding {} brackets. Ex:

{array.map((date, index) => {
  return <p key={index}>{date}</p>;
})}

answered Sep 22 '22 at 13:02

tuckermassad

126
4

1

Or alternatively, use either `()` or no brackets: `() => (
)` or `() =>
` – DBS Sep 22 '22 at 13:04
I would go for the @DBS suggestion if there is nothing else but a simple return. – assembler Sep 22 '22 at 13:05
1

What an absolutely stupid thing to have missed... Thank you for pointing that out, Tucker! – Jan_Alexander Sep 22 '22 at 13:06
DBS points out an alternative solution as well (note not using `{}` brackets). Whichever is more readable/preferred for you. – tuckermassad Sep 22 '22 at 13:07

score 0 · Answer 2 · answered Sep 22 '22 at 13:06

0

I think u are not returning the JSX inside the map method.The below code will render the list of array elements

   {array.map((date, index) => {
   return <p key={index}>{date}</p>;
   })}

answered Sep 22 '22 at 13:06

Srinu Rachakonda

43
1
5

score 0 · Answer 3 · answered Sep 22 '22 at 13:08

I got one solution here you just need to change little bit in your code , you can add return statement after the map function and I hope it will work for you.

{array.map((date, index) => {
return (
      <p key={index}>{date}</p>;
      )
   })}

Taki Kauser · Answer 4 · 2022-09-22T13:16:57.593

0

you can use this piece of code which is changed a bit.

https://codesandbox.io/s/currying-dust-uxu5jr?file=/src/App.js

{ array.map((date, index) => <p key={index}>{date}</p> ) }

edited Sep 22 '22 at 13:16

answered Sep 22 '22 at 13:14

Taki Kauser

58
6

Rendering an array of strings in React

4 Answers4