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

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

Answer 2

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>
  )