title: Array is not displayed in a list correctly
body: <p>I´m facing a problem with displaying my Array in a list.</p>
  
  <p>The Response of my Ajax-Request does look like this:</p>
  
  <pre><code>[{"id":"1","counter":"1"},{"id":"2","counter":"2"},{"id":"3","counter":"3"}]
  </code></pre>
  
  <p>My Action Code:</p>
  
  <pre><code>export default function getItems(){
  return (dispatch, getState) =&gt; {
      return dispatch (fecthItem())
      }
   }
  
   function fecthItem(){
      return dispatch =&gt; {
        // dispatch(requestPost())
         return fetch('http://localhost:444/localWebServices/getCounter.php')
          .then(response =&gt; response.json())
          .then(json =&gt; dispatch(receivePosts(json)))
       }
    }
  
   function receivePosts(json){
     console.log("receivePosts");
     var items = [];
     console.log(json.map( x =&gt; x.counter))
     // var items = json.map( x =&gt; x.counter);
     for (var i = 0, len = json.length; i &lt; len; i++) {
      console.log(json[i].counter);
          items.push(json[i].counter)
      }
  
       return {
         type: 'RECEIVE_POSTS',
         items: items
       }
     }
  </code></pre>
  
  <p>My Reducer  - getItem:</p>
  
  <pre><code>export default (state = [], action) =&gt; {
  switch (action.type){
      case 'RECEIVE_POSTS':
          return [
                  ...state,
                  {
                      text: action.items
                  }
              ]
      default:
          return state
  
     }
   }
  </code></pre>
  
  <p>Currently the result is displayed, but I´m not able to display each in an 
  own row of the list.</p>
  
  <p>The render to code to display the result:</p>
  
  <pre><code>      &lt;ul&gt;
                  {this.props.items.map((items, i) =&gt; &lt;li key={i}&gt;{items.text}   &lt;/li&gt;)}
              &lt;/ul&gt;
  </code></pre>
  
  <p>Can someone tell me what I have to change to display that items correctly in a List?</p>
  
  <p>UPDATE:</p>
  
  <p>Here is an Img from my Dev Console. I guess I´m creating the array the wrong way, what you think?</p>
  
  <p><a href="https://i.stack.imgur.com/LqYfD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LqYfD.png" alt="Array"></a></p>
  
  <p>And Here is my entire Component, that should render the list, maybe it helps :)</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import { connect } from 'react-redux'
  
  
   export default class TodoList extends Component {
  
    render() {
      const posts = this.props.todos
      console.log(this.props.items)
      const items = this.props.items
      const isEmpty = posts.length === 0
      return (
  
          &lt;div&gt;
              &lt;h3&gt;Meine Aufgaben&lt;/h3&gt;
              &lt;ul&gt;
                  {this.props.items.map((items, i) =&gt; &lt;li key={i}&gt;{items.text}&lt;/li&gt;)}
              &lt;/ul&gt;
              &lt;ul&gt;
  
                  {isEmpty
                      ? &lt;h3&gt;Sie haben noch keinen Todo´s angelegt&lt;/h3&gt;
                      : &lt;h3&gt;Ihre Ergebnisse&lt;/h3&gt;
                  }
                  {this.props.todos.map((todo, i) =&gt; &lt;li key={i}&gt;{todo.text}&lt;/li&gt;)}
              &lt;/ul&gt;
          &lt;/div&gt;
          )
       }
     }
     const mapStateToProp = state =&gt; ({todos: state.addItem, items: state.getItem})
  
      export default connect (mapStateToProp)(TodoList)
  </code></pre>
  
  <p>And Here is the output of the React extension:</p>
  
  <p><a href="https://i.stack.imgur.com/DSDPz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DSDPz.png" alt="React Extension"></a></p>
  
  <p>UPDATE:</p>
  
  <p>Okay. I guess the Error is something really basic, because as I try this with a an given Index, the item is displayed correctly:</p>
  
  <pre><code>  {this.props.items.map((items) =&gt; &lt;li key={items.text}&gt;{items.text[0]}&lt;/li&gt;)}
  </code></pre>
  
  <p>So how can I run over that?</p>