Got much of other-conlang integration working

App.jsx

@@ -15,7 +15,31 @@ function makeRequest(queryString, jsonHandler) {
     });
 }
 
+function renderConlangName(name) {
+  if (name == "saimiar") {
+    return "Saimiar";
+  }
+  if (name == "elesu") {
+    return "Elésu";
+  }
+
+  if (name === "juteyuji") {
+    return "Juteyuji";
+  }
+  if (name === "tukvaysi") {
+    return "Tukvaysi";
+  }
+}
+
 function Entry(props) {
+  const conlang = props.conlang;
+  if (conlang === "saimiar") {
+    return <SaiEntry entry={ props.entry } />;
+  }
+  return <div>Unknown entry type for { conlang }</div>;
+}
+
+function SaiEntry(props) {
   const entry = props.entry;
   return (
     <div className="searchResult" key={ entry.id }>
@@ -36,14 +60,16 @@ class Results extends Component {
   }
 
   content() {
+    const conlang = this.props.conlang;
     const num = this.props.searchResults.length;
-    const searchType = (this.props.direction === "toConlang") ? `English -> ${this.props.conlang}` : `${this.props.conlang} -> English`;
+    const renderedName = renderConlangName(conlang);
+    const searchType = (this.props.direction === "toConlang") ? `English -> ${renderedName}` : `${renderedName} -> English`;
     const header = (
       <div className="searchResultHeader" key="header">
         Searched for <b>{ this.props.searchTerm }</b>, { searchType }, found { num } result(s)
       </div>);
     const entries = this.props.searchResults.map(
-      (entry, idx) => <Entry entry={ entry } key= { entry.id } />
+      (entry, idx) => <Entry entry={ entry } key= { entry.id } conlang={ conlang } />
     );
     return [header].concat(entries);
   }
@@ -62,12 +88,14 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.input = React.createRef();
+    this.handleLangChange = this.handleLangChange.bind(this);
+
     this.searchEng = this.searchEng.bind(this);
     this.searchSaimiar = this.searchSaimiar.bind(this);
 
     this.state = {
       searchResults: null,
-      conlang: null,
+      conlang: "saimiar",
       direction: null,
       searchTerm: null
     };
@@ -77,10 +105,10 @@ class App extends Component {
     const searchTerm = this.input.current.value;
     const request = `saimiar?sai=like.*${searchTerm}*`
     if (searchTerm === "") {
-      this.setState({ searchResults: null, searchTerm: null, conlang: null, direction: null });
+      this.setState({ searchResults: null, searchTerm: null, direction: null });
     } else {
       makeRequest(request, (json) => {
-        this.setState({ searchResults: json, conlang: "Saimiar", searchTerm, direction: "toEnglish" });
+        this.setState({ searchResults: json, searchTerm, direction: "toEnglish" });
       });
     }
   }
@@ -89,15 +117,21 @@ class App extends Component {
     const searchTerm = this.input.current.value;
     const request = `saimiar?eng=like.*${searchTerm}*`
     if (searchTerm === "") {
-      this.setState({ searchResults: null, searchTerm: null, conlang: null });
+      this.setState({ searchResults: null, searchTerm: null, });
     } else {
       makeRequest(request, (json) => {
-        this.setState({ searchResults: json, conlang: "Saimiar", searchTerm, direction: "toConlang" });
+        this.setState({ searchResults: json, searchTerm, direction: "toConlang" });
       });
     }
   }
 
+  handleLangChange(evt) {
+    const conlang = evt.target.value;
+    this.setState({ conlang });
+  }
+
   render() {
+
     return(
       <main>
         <div className='container'>
@@ -107,6 +141,12 @@ class App extends Component {
                 <input className='textInput' type="text" ref={ this.input } />
             </div>
             <br/>
+            <select ref={ this.langSelection } onChange={ this.handleLangChange } defaultValue="saimiar">
+              <option value="saimiar">Saimiar</option>
+              <option value="elesu">Elesu</option>
+              <option value="tukvaysi">Tukvaysi</option>
+              <option value="juteyuji">Juteyuji</option>
+            </select>
             <button onClick={ this.searchSaimiar } className="searchButton">Saimiar</button>
             <button onClick={ this.searchEng } className="searchButton">English</button>
           </div>