diff --git a/projectFirstPart/components/states/States.jsx b/projectFirstPart/components/states/States.jsx index d04125aaacae2c0f4e7a0bf76cdac43d2440a5a5..c3bc8a97b69e725af6518e4b9448427e8f7f9f4f 100644 --- a/projectFirstPart/components/states/States.jsx +++ b/projectFirstPart/components/states/States.jsx @@ -7,55 +7,39 @@ import './States.css'; * at window.cs142models.statesModel(). */ class States extends React.Component { - constructor(props) { - super(props); - console.log('window.cs142models.statesModel()', window.cs142models.statesModel()); - } - - findStates(event) { - function matchStates(value, statesModel) { - let results = []; - statesModel.forEach(e => { - if (e.toLowerCase().includes(value)) results.push(e) - }); - return results; - } - - - let out = document.getElementById("content"); //Get table to edit - out.innerHTML = ""; //Clear table - - // Exit - if (event.target.value == "") { - return ""; + constructor(props) { + super(props); + this.state = { + states: window.cs142models.statesModel().sort(), + displayedStates: window.cs142models.statesModel().sort(), + searchValue: '' + }; + //console.log('window.cs142models.statesModel()', this.state.states); + } + + onInputChange = (event) => { + this.setState({ + searchValue: event.target.value, + displayedStates: this.state.states.filter((usStates) => usStates.toLowerCase().includes(event.target.value.toLowerCase())) + }); + } + + render() { + return ( + <div> + <input value={this.state.searchValue} onChange={this.onInputChange} /> + <div>{this.state.searchValue}</div> + {this.state.displayedStates.length === 0 ? + <div>No matches</div> : + <ul> + {this.state.displayedStates.map((usState) => + <li key={usState}>{usState}</li> + )} + </ul> } - - // Get matching states - let results = matchStates(event.target.value, window.cs142models.statesModel()); - - // Update dive - if (results.length == 0) { - out.innerHTML = "<tr><td>There are no matching states to this string!</td></tr>"; - } else { - out.innerHTML = "<tr><th>States</th></tr>" - results.forEach(e => { - out.innerHTML += "<tr><td>" + e.toString() + "</td></tr>" - }) - } - } - - render() { - return ( - <div> - <label htmlFor="inName">Name: </label> - <input type="text" placeholder="country" id="inName" onChange={this.findStates}/> - <table> - <tbody id="content"> - </tbody> - </table> - </div> - ); - } + </div> + ); + } } -export default States; \ No newline at end of file +export default States;