score:0

Accepted answer

you forgot return inside your map.

  render() {   
   const obj = this.props.posts.posts;
   let arr;
   if (obj) {
     arr = Object.values(obj); //Converting an Object into an array
   }

   return (
    <div>
      { arr ?
        <div>
          { arr.map(post => {
              return (
                <div key={post.id}>
                  {post.title}
                </div>
              )
            })
          }
        </div> :
        <div>
          No Data
        </div>
       }
      </div>
    );
  }

or, alternatively, drop the curly braces with a oneliner:

arr.map(post => (<div key={post.id}>
                   {post.title}
                 </div>
                )
       )

and don't forget the key attribute.
I also suggest you abstract way your dumb components. It'll make your code more readable.

score:1

You need map your data. Something like this:

<div>
  <ul>
  {props.incomingDataArray.map((singleArrayItem, index) => {
    return (
    <li key="list + index">{singleArrayItem.commentCount}</li>
    <li key="list + index">{singleArrayItem.timestamp}</li>
    )
   })
  }
  </ul>
<div>

score:2

You can keep your data as an object, and use Object.keys to get an array of keys, map over the keys, and use the keys to access nested objects. If you don't know the shape of your data source, you could use recursion.

Here is a working code sandbox example where I've taken your data source and turned it into a table to illustrate how to do so.

Here is the code:

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';


const defaultData = {
  "8xf0y6ziyjabvozdd253nd": {
    id: '8xf0y6ziyjabvozdd253nd',
    timestamp: 1467166872634,
    title: 'Udacity is the best place to learn React',
    body: 'Everyone says so after all.',
    author: 'thingtwo',
    category: 'react',
    voteScore: 6,
    deleted: false,
    commentCount: 2
  },
  "6ni6ok3ym7mf1p33lnez": {
    id: '6ni6ok3ym7mf1p33lnez',
    timestamp: 1468479767190,
    title: 'Learn Redux in 10 minutes!',
    body: 'Just kidding. It takes more than 10 minutes to learn technology.',
    author: 'thingone',
    category: 'redux',
    voteScore: -5,
    deleted: false,
    commentCount: 0
  }
}

const TableHeader = ({ fields }) => (
  <thead>
    <tr>
    {
      fields.map( field => <th key={ field }>{ field }</th>)
    }
    </tr>
  </thead>
);

const TableBody = ({ data }) => (
  <tbody>
    {
      Object.keys(data).map(
        datum =>
          <tr>
          {
            Object.keys(data[datum]).map(
              field => <td>{data[datum][field]}</td>
            )
          }
          </tr>
      )
    }
  </tbody>
);

const App = () => (
  <table>
    <TableHeader fields={ Object.keys(defaultData[Object.keys(defaultData)[0]]) } />
    <TableBody data={defaultData} />
  </table>
);

render(<App />, document.getElementById('root'));

Related Query

More Query from same tag