added a search bar and loaded the xml

src/App.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FocusStyleManager } from '@blueprintjs/core';
-// import { Table, Cell, Column } from '@blueprintjs/table';
+import * as XML from 'xml2js';
+// import { Table } from '@blueprintjs/table';
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -9,27 +10,58 @@ FocusStyleManager.onlyShowFocusOnTabs();
 class App extends React.Component<{}, null> {
   render() {
     return (
-      <nav className="pt-navbar pt-dark-app-background-color">
-        <div className="pt-navbar-group pt-align-left">
-          <span className="pt-icon-large pt-icon-edit pt-intent-success"/>
-          <div className="pt-navbar-heading">Lex Editor</div>
-        </div>
-      </nav>
+      <div>
+        <nav className="pt-navbar pt-dark">
+          <div className="pt-navbar-group pt-align-left">
+            <button className="pt-button pt-minimal pt-icon-large pt-icon-edit"/>
+            <div className="pt-navbar-heading">Lex Editor</div>
+          </div>
+        </nav>
+        <LexEditor fileName="/new_es.xml"/>
+      </div>
     );
   }
 }
 
-// class LexEditor extends React.Component<{}, null> {
-//   render() {
-//     const renderCell = (rowIndex: number) => {
-//         return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>;
-//     };
-//     return (
-//         <Table numRows={10}>
-//             <Column name="Dollars" renderCell={renderCell}/>
-//         </Table>
-//     );
-//   }
+// interface LexEditorProps {
+//   fileName: string;
 // }
 
+class LexEditor extends React.Component<any, null> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  public handleOnChange(event: any): void {
+      this.setState({ searchWord : event.target.value });
+  }
+
+  componentDidMount() {
+    return fetch(this.props.fileName)
+    .then((response) => response.text())
+    .then((xmlString) => {
+      XML.parseString(xmlString, (err, jsObj) => {
+        this.setState({'lexdata': jsObj});
+      });
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+  }
+  render() {
+    return (
+      <div className="pt-input-group">
+        <span className="pt-icon pt-icon-search"/>
+        <input
+          className="pt-input"
+          type="search"
+          placeholder="Search input"
+          dir="auto"
+          onChange = {e => this.handleOnChange(e)}
+        />
+      </div>
+    );
+  }
+}
+
 export default App;