diff --git a/App.jsx b/App.jsx
index e380961..302d68a 100644
--- a/App.jsx
+++ b/App.jsx
@@ -20,6 +20,19 @@ function testHandler(json) {
   console.log(json);
 }
 
+function Entry(props) {
+  const entry = props.entry;
+  return (
+    <div className="searchResult" key={ entry.id }>
+      <b>{ entry.sai }</b> - { entry.eng }
+      <br />
+      <span className="synclass">{ entry.syn_category }</span>
+      <br />
+      Type: { entry.morph_type }
+    </div>
+  );
+}
+
 class Results extends Component {
   constructor(props) {
     super(props);
@@ -31,15 +44,9 @@ class Results extends Component {
       <div className="searchResultHeader">
         Searched for <b>{ this.props.searchTerm }</b> search type: { this.props.searchType }
       </div>);
-    const entries = this.props.searchResults.map((entry, idx) => {
-      return (<div className="searchResult" key={ entry.id }>
-        <b>{ entry.sai }</b> - { entry.eng }
-        <br />
-        <span className="synclass">{ entry.syn_category }</span>
-        <br />
-        Type: { entry.morph_type }
-      </div>);
-    });
+    const entries = this.props.searchResults.map(
+      (entry, idx) => <Entry entry={ entry } key= { entry.id } />
+    );
     return [header].concat(entries);
   }