title: React 16 just renders array of numbers into table data in map function
body: <p>I have been attempting to render words with most frequencies. I have done with fetching API.To render words with there total count.I also have setState words and mapped words array in <code>render()</code>.I was expected words with there counts. I only get numbers as <code>1    1    1    1    1    1    1    1    1    1    1    2    1</code>. in table data.</p>
  
  <pre><code>import React, { Component } from "react";
  import { Grid, Row, Col, Table } from "react-bootstrap";
  import axios from "axios";
  class About extends Component {
    state = {
      counts: [],
      posts: [],
      words: []
    };
  
    componentDidMount() {
      axios({
        url:
          "https://cors-anywhere.herokuapp.com/http://terriblytinytales.com/test.txt",
        responseType: "text"
      })
        .then(res =&gt; {
          const posts = res.data;
          const newPosts = posts.split(/[0-9]+\./).map(post =&gt; post.split("?"));
          // console.log(newPosts);
          this.setState({
            posts: newPosts
          });
          return res;
        })
        .then(res =&gt; {
          const texts = res.data;
          let words = texts.replace(/[.]/g, "").split(/\s/);
          let freqMap = [];
          words.map(w =&gt; {
            if (!freqMap[w]) {
              freqMap[w] = 0;
            }
            freqMap[w] += 1;
            console.table(freqMap);
            return freqMap;
          });
          this.setState({
            words: freqMap
          });
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  
    render() {
      return (
        &lt;Grid&gt;
          &lt;Row&gt;
            &lt;Col xs={12} sm={6} md={6}&gt;
              &lt;h1&gt;fetched data&lt;/h1&gt;
              &lt;ol&gt;
                {this.state.posts.map((post, i) =&gt; (
                  &lt;li key={i} style={{ listStyle: "none" }}&gt;
                    {post.map((p, j) =&gt; (
                      &lt;p key={j}&gt;{p + (j % 2 === 0 ? "?" : "")}&lt;/p&gt;
                    ))}
                  &lt;/li&gt;
                ))}
              &lt;/ol&gt;
            &lt;/Col&gt;
  
            &lt;Col xs={12} sm={6} md={6}&gt;
              &lt;Row&gt;
                &lt;Table striped bordered condensed hover&gt;
                  &lt;tbody&gt;
                    &lt;tr&gt;
                      {this.state.words.map((post, i) =&gt; &lt;td key={i}&gt;{post}&lt;/td&gt;)}
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                &lt;/Table&gt;
              &lt;/Row&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Grid&gt;
      );
    }
  }
  export default About;
  </code></pre>