Array.map object not displaying to the view?

Question

I have an array stored in my redux store, but when I call notifications.map((x, i) => {} nothing actually renders to the view... however if I console.log x to the console then they print....

How do I get my array contents to render to the view?

import React from 'react'
import { connect } from 'react-redux'
import {List, ListItem} from 'material-ui/List'

const mapStateToProps = state => {
  return {
    notifications: state.notificationsReducer.notifications,
    errorMessage: state.notificationsReducer.errorMessage
  }
}

const notifications = ({notifications, errorMessage}) => {
  notifications.map((x, i) => {
    console.log(x.title)
  })
  return (
    <List>
      {notifications.map((x, i) => {
        <ListItem key={i} primaryText={x.title} />
      })}
    </List>
  )
}

const Notifications = connect(mapStateToProps)(notifications)
export default Notifications

Possible duplicate of trying to render a react state object

Preview
– Preview

2017-05-20 07:27:51 +00:00
Commented May 20, 2017 at 7:27 — Preview
– Preview, Commented May 20, 2017 at 7:27
You need to return the list in your map function

Amr Aly
– Amr Aly

2017-05-20 07:30:49 +00:00
Commented May 20, 2017 at 7:30 — Amr Aly
– Amr Aly, Commented May 20, 2017 at 7:30

Tharaka Wijebandara · Accepted Answer · 2017-05-20 07:31:49Z

1

Remove the brackets of arrow function inside the map.

<List>
  {notifications.map((x, i) => 
    <ListItem key={i} primaryText={x.title} />
  )}
</List>

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

I 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.

edited May 20, 2017 at 7:31

answered May 20, 2017 at 7:25

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bamieh · Accepted Answer · 2017-05-20 07:35:19Z

1

you have to return a value from the function to get the result you want

  return (
    <List>
      {notifications.map((x, i) => {
        return <ListItem key={i} primaryText={x.title} />
      })}
    </List>
  )

or simply by not opening a curly brackets in the first place (implicit return)

  return (
    <List>
      {notifications.map((x, i) =>
           <ListItem key={i} primaryText={x.title} />
      )}
    </List>
  )

answered May 20, 2017 at 7:35

Bamieh

11k5 gold badges34 silver badges52 bronze badges

Collectives™ on Stack Overflow

Array.map object not displaying to the view?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest