Modified states to the one displayed in class

projectFirstPart/components/states/States.jsx

@@ -9,50 +9,34 @@ import './States.css';
 class States extends React.Component {
   constructor(props) {
     super(props);
-        console.log('window.cs142models.statesModel()', window.cs142models.statesModel());
+    this.state = {
+      states: window.cs142models.statesModel().sort(),
+      displayedStates: window.cs142models.statesModel().sort(),
+      searchValue: ''
+    };
+    //console.log('window.cs142models.statesModel()', this.state.states);
   }
 
-    findStates(event) {
-        function matchStates(value, statesModel) {
-            let results = [];
-            statesModel.forEach(e => {
-                if (e.toLowerCase().includes(value)) results.push(e)
+  onInputChange = (event) => {
+    this.setState({
+      searchValue: event.target.value,
+      displayedStates: this.state.states.filter((usStates) => usStates.toLowerCase().includes(event.target.value.toLowerCase()))
     });
-            return results;
-        }
-
-
-        let out = document.getElementById("content"); //Get table to edit
-        out.innerHTML = "";                                      //Clear table
-
-        // Exit
-        if (event.target.value == "") {
-            return "";
-        }
-
-        // 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>
+        <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>
+        }
       </div>
     );
   }