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;