title: JSX component doesn't render map of state
body: <p>i'm trying to make a list when users selects their fav links onClick ...</p>
  
  <p>Any idea why this doesn't work? it will push values to state.array in console.log but JSX will not render in ul.li </p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class App extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        link: {
          name: "",
          type: "",
          size: "",
          tests: []
        },
        tests: ["1", "2", "3", "4"]
      };
    }
  
    componentDidMount() {
      console.log(this.state);
    }
  
    onClick = e =&gt; {
      const linktests = this.state.link.tests;
      console.log("clicked");
  
      linktests.push(e.target.innerText);
      console.log("link tests : " + linktests);
    };
    render() {
      const { link, tests } = this.state;
      const linktests = this.state.link.tests;
      return (
        &lt;div&gt;
          &lt;div id="link"&gt;
            {linktests.map(stuff =&gt; (
              &lt;ul&gt;
                &lt;li&gt; {stuff} &lt;/li&gt;
              &lt;/ul&gt;
            ))}
          &lt;/div&gt;
          &lt;br&gt;&lt;/br&gt;
          {tests.map(stuff =&gt; (
            &lt;ul&gt;
              &lt;li onClick={this.onClick} value={stuff}&gt;
                {stuff}
              &lt;/li&gt;
            &lt;/ul&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>hope someone can help :D &lt;3 thanks</p>