javascript - State Changes but not reflected in DOM

Question

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.

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.

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.
Github Repository

     > handleSubmit = (e) => {
     e.preventDefault();
     this.addstateVote(this.state.nameofstate, this.state.apcVotes,   this.state.pdpVotes);
 }

  addstateVote=(nameofstate, apcVotes, pdpVotes)=>{
    const newStateVotes=[...this.state.stateVote, {nameofstate, apcVotes, pdpVotes}]
this.setState({stateVote:newStateVotes})
  }

  render() {
    const DisplayStateResult=this.state.stateVote.map(function (datasource) {
            return (<DisplayStateResults key={datasource.index} name={datasource.name} apcVotes={datasource.apcVotes} pdpVotes={datasource.pdpVotes}/>)
      })
return (
  <div className="App">
    <NavBar />
    <AddStateResult 
        handleChange={this.handleChange} 
        nameofstate={this.state.nameofstate} 
        apcVotes={this.state.apcVotes}
        pdpVotes={this.state.pdpVotes}
        handleSubmit={this.handleSubmit}
        />
        <br />
        <table>
        <caption>Collated Results</caption>
        <thead>
          <tr>
          <th width='100'>State</th>
          <th width='50'>APC</th>
          <th width='50'>PDP</th>
         </tr>
         </thead>
          </table>

         {DisplayStateResult}
  </div>
);

}

Answer 1

Ok, so I took a look at your Github repo and you have two main problems:

First, You are calling the function "handleSubmit" at AddStateResuts, but you are not passing the required "e" argument for it to work.

If you take a look at your dev tools console there must be a warning about it.

That you can fix as bellow ath the line 8 of the component AddStateResuts:

    <form onSubmit={e => this.props.handleSubmit(e)}>

Second, even if it now shows the APC and PDP values it will not show the State name.

That's because you named it "nameofstate" at "AddStateResuts", while it's named as "name" at "DataSource" and "App". What I did to make it work was to change all the instances of "name" regarding the state name to "nameofstate" at the "Datasource", "DisplayStateResult" and "App" components as it is more specific and it now works like a charm.

Good coding, I'm also kind of new to React and it can be kind of confusing at the start, I suggest you to always keep an eye at the normal dev tools console, not only the React tools.