React.js counter of /hello/:name kept in state. (Blocker 2 of 2)

CountsTests.js

/*

See related gist first:  Related gist:  https://gist.github.com/jeremy-donson/d9eae766cd90591015e1955d1162e30c

There is a counter to track names used ( /name/Bilbo ) while React page state is maintained.

The idea is to go to /counts url and see displayed collected stats on the occurrences of /hello/:name

Sample data structure:

{ {"name":"Bilbo", "count":3},{"name":"Cher", "count":1}}, {"name":"bilbo", "count":2} }

Additional Credit For:
- Logic which recognizes Bilbo as equal to bilbo, or not, as desired.
- Logic which handles spaces in the name, such as Joe Bob. (Joe%20Bob)
- Solutions for unicode names.

This Component is being imported by Routes.js.

I am not sure how to grab logic from 'Namer.js' and tie that into the main state (this.state.namecounts?).

As you can see, I am just trying to make this work with POST data unti I better understand the prior Namer.js issue.

Related gist:  https://gist.github.com/jeremy-donson/d9eae766cd90591015e1955d1162e30c

*/

import React, { Component } from 'react';

class CountsTests extends Component {
//  constructor(props) {super(props);

  constructor(){ super(); this.state = { nameCounts:{} }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.displayTestCounts = this.displayTestCounts.bind(this);
    this.displayCounts = this.displayCounts.bind(this);
    this.addName = this.addName.bind(this);
    this.addCount = this.addCount.bind(this);
    this.resetCounts = this.resetCounts.bind(this);
    this.capitalizeFirstLetter = this.capitalizeFirstLetter.bind(this);
}

// let arr = this.state.myarr.slice();
// arr.push('data');
// this.setState({arr});

defaultProps = {names:[ {"name": "mic", "count": 2}, {"name": "max", "count": 1} ]};
defaultProps = {names2:[ {"name": "mic", "count": 2}, {"name": "max", "count": 1} ]};

   
capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); }

handleChange(event) { this.setState({value: event.target.value}); }
handleSubmit(event) { alert('A fave flavor was submitted: ' + this.state.value); event.preventDefault(); }

testCounts: [ {"name": "alice", "count": 2}, {"name": "bob", "count": 1}, {"name": "mic", "count": 1} ] ;


displayTestCounts(testCounts) { return testCounts }
displayCounts(names) { return names }
addName() {this.setState({"name": "new", "count": 1});}
addCount() { this.setState({"name": "new", "count": 2}); }  
resetCounts() { this.setState({"name": "nobody", "count": 0}); }

  render() {
  const testcounts = '{"name": "alice", "count": 2}, {"name": "bob", "count": 1}';
    return(
     <div>
      <form onSubmit={this.handleSubmit}>
      <label>Name: <input type="text" value={this.state.value} onChange={this.handleChange}/></label>
      <button type="submit" name="nameInput">Submit</button>
      </form>
      <ul>
      <li>Test Count:<br/>{testcounts}</li>
      <li>Last Count:<br/>{this.state.names}</li>
      <li>New Count:<br/>{this.state.newCount}</li>
      </ul>
     </div>
    );
  }
}

export default CountsTests

ScreenShotOfCountTestUI