Created
January 12, 2018 14:25
-
-
Save jeremy-donson/f554c4317ff2a085284ef982d3b4913e to your computer and use it in GitHub Desktop.
React.js counter of /hello/:name kept in state. (Blocker 2 of 2)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ScreenShotOfCountTestUI