Commit c9c02efd authored by Martin Wighus Holtmon's avatar Martin Wighus Holtmon
Browse files

Modified states to the one displayed in class

parent fa2a2318
......@@ -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;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment