Added dropdown box component for parts of speech, but editing words isn't working for some reason on Linux.

src/components/Dictionary.jsx

@@ -20,6 +20,7 @@ export class Dictionary extends React.Component {
             simpleDefinition={word.simpleDefinition}
             longDefinition={word.longDefinition}
             wordId={word.wordId}
+            dictionary={this}
             updateWord={(wordId, wordObject) => this.props.updateWord(wordId, wordObject)} />
         );
       });

src/components/Dropdown.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import {Input} from './Input';
 
+import {htmlEntities} from '../js/helpers';
+
 export class Dropdown extends Input {
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value || false
+      value: props.value || ' '
     , isDisabled: props.isDisabled || false
     };
   }
@@ -14,7 +16,7 @@ export class Dropdown extends Input {
   // Whenever the input changes, update the value state of this component
   handleOnChange(event) {
     this.setState({
-      value: event.target.checked
+      value: event.currentTarget.value
     });
   }
 
@@ -22,9 +24,11 @@ export class Dropdown extends Input {
     let results = [];
     let options = optionsString.split(',');
 
-    options.forEach((option) => {
+    options.forEach((option, index) => {
+      let optionValue = htmlEntities(option.trim());
+
       results.push(
-        <option>
+        <option key={`o:${index}v:${optionValue}`} value={optionValue}>
           {option.trim()}
         </option>
       );
@@ -40,7 +44,8 @@ export class Dropdown extends Input {
           {this.props.name}
           {this.showHelperLink()}
         </span>
-        <select onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
+        <select value={this.state.value} onChange={this.handleOnChange} disabled={(this.state.isDisabled) ? 'disabled' : null}>
+          <option value=" "></option>
           {this.parseOptions(this.props.optionsList)}
         </select>
       </label>

src/components/Word.jsx

@@ -82,6 +82,7 @@ export class Word extends React.Component {
     if (this.state.editWord) {
       return (
         <WordForm
+          partsOfSpeech={this.props.dictionary.props.settings.partsOfSpeech}
           updateWord={(wordObject) => this.updateWord(wordObject)}
           wordValues={this.packageThisWordIntoObject()}
           submitLabel='Update' />

src/components/WordForm.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {keyCodeFor} from '../js/helpers'
 
 import {Input} from './Input';
+import {Dropdown} from './Dropdown';
 import {TextArea} from './TextArea';
 import {Button} from './Button';
 
@@ -107,7 +108,8 @@ export class WordForm extends React.Component {
           onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.pronunciationField = inputComponent} />
 
-        <Input name='Part of Speech'
+        <Dropdown name='Part of Speech'
+          optionsList={this.props.partsOfSpeech}
           value={partOfSpeechDefaultValue}
           ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
 

src/index.jsx

@@ -132,6 +132,8 @@ class Lexiconga extends React.Component {
   // Search the words list for the first word with the given idea and return its index in the array.
   firstIndexWordWithId(id) {
     this.state.words.forEach((word, index) => {
+      console.log('given id: ' + typeof id + ' ' + id + '\n' + typeof word.wordId + ' ' + word.wordId + ' ' + word.name);
+
       if (word.wordId === id) {
         return index;
       }
@@ -247,7 +249,10 @@ class Lexiconga extends React.Component {
 
         <div className='left-column'>
           <div className='floating-form'>
-            <WordForm addWord={(wordObject) => this.addWord(wordObject)} submitLabel='Add Word' />
+            <WordForm
+              partsOfSpeech={this.state.settings.partsOfSpeech}
+              addWord={(wordObject) => this.addWord(wordObject)}
+              submitLabel='Add Word' />
           </div>
         </div>