title: State Changes but not reflected in DOM
body: <p>Still a React newbie, I'm working on a basic election collation App that sums up results from various states among the two main political parties then determines who had the higher votes overall. I have divided the main tasks of the project into 3 phases, the first one is to be able to add individual state results, which I've completed. The second is to be able to display the most recent state results, while the last is to sum up the votes and determine the winner. </p>
  
  <p>I'm currently in the second phase, the issue I am having is that after adding a new state entry, the value is not displayed in the DOM, even though when I use the React extension it shows that the state (I mean React state) had actually changed. I'll paste the portion of the code where I think the error is from here, and also include a link to the github repository. </p>
  
  <p>It's a completely personal educational project. I'll appreciate any help that can assist me knowing how to make newly entered states (I mean country state, not React state) to show.<br>
  <a href="https://github.com/CodingIsFood/e-election-collation-app" rel="nofollow noreferrer">Github Repository</a></p>
  
  <pre><code>     &gt; handleSubmit = (e) =&gt; {
       e.preventDefault();
       this.addstateVote(this.state.nameofstate, this.state.apcVotes,   this.state.pdpVotes);
   }
  
    addstateVote=(nameofstate, apcVotes, pdpVotes)=&gt;{
      const newStateVotes=[...this.state.stateVote, {nameofstate, apcVotes, pdpVotes}]
  this.setState({stateVote:newStateVotes})
    }
  
    render() {
      const DisplayStateResult=this.state.stateVote.map(function (datasource) {
              return (&lt;DisplayStateResults key={datasource.index} name={datasource.name} apcVotes={datasource.apcVotes} pdpVotes={datasource.pdpVotes}/&gt;)
        })
  return (
    &lt;div className="App"&gt;
      &lt;NavBar /&gt;
      &lt;AddStateResult 
          handleChange={this.handleChange} 
          nameofstate={this.state.nameofstate} 
          apcVotes={this.state.apcVotes}
          pdpVotes={this.state.pdpVotes}
          handleSubmit={this.handleSubmit}
          /&gt;
          &lt;br /&gt;
          &lt;table&gt;
          &lt;caption&gt;Collated Results&lt;/caption&gt;
          &lt;thead&gt;
            &lt;tr&gt;
            &lt;th width='100'&gt;State&lt;/th&gt;
            &lt;th width='50'&gt;APC&lt;/th&gt;
            &lt;th width='50'&gt;PDP&lt;/th&gt;
           &lt;/tr&gt;
           &lt;/thead&gt;
            &lt;/table&gt;
  
           {DisplayStateResult}
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>}</p>