title: Creating A Dropdown Typescript/Entity Framework
body: <p>I am needing to create a dropdown to select a file category, then save the value of that category in the database. However I can't seem to get the dropdown to render, I also cant add an onChange to get the value without getting an error that my component is &quot;read-only&quot;. Any tips here?</p>
  <p><a href="https://i.stack.imgur.com/spO7j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/spO7j.png" alt="localhost" /></a></p>
  <p>Here is my dropdown component</p>
  <pre><code>import * as React from &quot;react&quot;;
  
  
  
  
  export class Dropdown extends React.Component&lt;{}, {value: string}&gt;{
  constructor(props: any) {
    super(props);
    this.state = {value: 'Select A Category'};
  
    this.handleChange = this.handleChange.bind(this);
  }
  
  public handleChange(event: any) {
    this.setState({value: event.target.value});
  }
  
  
   public render() {
    return (
      &lt;form&gt;
          &lt;select value={this.state.value} onChange={this.handleChange}&gt;
            &lt;option value=&quot;Not Categorized&quot;&gt;Not Categorized&lt;/option&gt;
            &lt;option value=&quot;Signed Documents&quot;&gt;Signed Documents&lt;/option&gt;
            &lt;option value=&quot;Unsigned Documents&quot;&gt;Unsigned Documents&lt;/option&gt;
            &lt;option value=&quot;3rd Party Documents&quot;&gt;3rd Party Documents&lt;/option&gt;
            &lt;option value=&quot;General Well Info&quot;&gt;General Well Info&lt;/option&gt;
          &lt;/select&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  <p>}</p>
  <p>Here are the notable places I am trying to render this:</p>
  <pre><code>import {Dropdown} from './Dropdown';
  
  public renderCategory = (file: any) =&gt; () =&gt; { 
      
     return &lt;Dropdown /&gt;;
      
  }
   public onCategoryChange = (event: any) =&gt; { 
      // Update the state 
      this.setState({ 
          isDirty: true,
          selectedFile: event.target.files,
      }); 
     
  }
   private formatWellFiles = () =&gt; {
      const files = this.state.well.files;
      const headers = [
          &quot;File Name&quot;,
          &quot;Category&quot;,
          &quot;Size&quot;,
          &quot;Uploaded By&quot;,
          &quot;Upload Date&quot;,
          &quot;Download&quot;,
      ];
      const rows = files.map(f =&gt; {
          return [
              {
                  content: f.name
              },
              {
                  content: this.renderCategory(f.category)
              },
              {
                  content: this.renderSize(f.size),
                  sortItem: Number(f.size),
                  type: 'render'
              },
              {
                  content: f.createUser
              },
              {
                  content: f.createDate
              },
              {
                  content: this.renderDownload(f),
                  type: 'render',
              },
          ];
  
      });
     public render() {
      return(
          &lt;div&gt;
              &lt;Prompt when={this.state.isDirty} message={&quot;Changes have been made.\n\nPress Cancel then Press Save OR Press OK to continue without saving.&quot;} /&gt;
              &lt;WorkflowHeader wellSetupComplete={this.state.well.wellSetupComplete} workflowHeaderItems={this.props.workflowHeaderItems}/&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;FormGroup&gt;
                          &lt;Label&gt;Upload File&lt;/Label&gt;
                          &lt;Input
                              type=&quot;file&quot;
                              name=&quot;file&quot;
                              id=&quot;file&quot;
                              multiple={true}
                              onChange={this.onFileChange}
                          /&gt;
                      &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                      &lt;Button
                          color=&quot;primary&quot;
                          onClick={this.onFileUpload}
                      &gt;
                          Upload File
                      &lt;/Button&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;DataTable
                          list={this.formatWellFiles()}
                          onDelete={this.handleDeleteFile}
                      /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;ButtonRow&gt;
                  &lt;WellRevertCloseButton /&gt;
              { &lt;WellCloseButton /&gt;}
                  { this.WellsStore.canUpdateWell() &amp;&amp; &lt;EButton color=&quot;primary&quot; name=&quot;save&quot; onClick={this.updateWellModel}&gt;Save&lt;/EButton&gt;}
                  &lt;Button className=&quot;secondary&quot; name=&quot;previousButton&quot; onClick={this.buttonNavigation}&gt;Previous&lt;/Button&gt;
                  &lt;Button className=&quot;secondary&quot; name=&quot;nextButton&quot; onClick={this.buttonNavigation}&gt;Next&lt;/Button&gt;
                  &lt;WellFooter /&gt;
              &lt;/ButtonRow&gt;
  
          &lt;/div&gt;
  </code></pre>
  <p>Here is the full well files if it helps</p>
  <pre><code>import { intercept, toJS } from 'mobx';
  import { inject, observer } from 'mobx-react';
  import * as React from 'react';
  import { Prompt, withRouter } from 'react-router-dom';
  import { Button, Col, Input, Row } from 'reactstrap';
  import FormGroup from 'reactstrap/lib/FormGroup';
  import Label from 'reactstrap/lib/Label';
  import DataTable from 'src/Components/DataTable';
  import { EButton } from 'src/Components/EInput';
  import WellFooter from 'src/Components/Footer/WellFooter';
  import { MessageStore } from 'src/Stores/Messages/Messages';
  import { WellsStore } from 'src/Stores/Wells/WellsStore';
  import { IWell } from '../../../../Interfaces/WellInterface';
  import ButtonRow from '../../../ButtonRow';
  import WorkflowHeader from '../../WorkflowHeader';
  import WellCloseButton from '../WellCloseButton';
  import WellRevertCloseButton from &quot;../WellRevertCloseButton&quot;;
  import {Dropdown} from './Dropdown';
  
  
   interface IParams {
     wellId: string;
  }
  
   @inject('stores')
   @observer
   class WellFiles extends React.Component {
  public props: any;
  public params: IParams;
  private WellsStore: WellsStore;
  private MessageStore: MessageStore;
  // disposers
  public wellDisposer: any;
  
  public state = {
      isDirty: false,
      selectedFile: [] as any[],
      well: new IWell(),
      wellId: this.props.match.params.wellId,
      wellPageTitle: 'New Well',
  };
  
  constructor(props: any) {
      super(props);
  
      this.WellsStore = this.props.stores.WellsStore;
      this.MessageStore = props.stores.MessageStore;
      this.params = this.props.match.params;
  }
  
  public componentDidMount() {
      this.createDisposers();
      if (this.props.stores.WellsStore.well) {
          this.setState({
              well: this.props.stores.WellsStore.well,
          });
      } else {
          this.WellsStore.getWellDetails(this.params.wellId);
      }
  }
  
  public componentWillUnmount() {
      this.wellDisposer();
  }
  
  public createDisposers() {
      this.wellDisposer = intercept(this.WellsStore, 'well', (change: any) =&gt; {
          this.setState({
              well: toJS(change.newValue),
          });
  
          return change;
      });
  }
  
  private updateWellModel = () =&gt; {
      this.WellsStore.updateWellModel(this.state.well)
          .then(
              (data: any) =&gt; {
                  if(data) {
                      this.setState({
                          isDirty: false,
                      });
                  }
              }
          );
  }
  
  public onFileChange = (event: any) =&gt; { 
      // Update the state 
      this.setState({ 
          isDirty: true,
          selectedFile: event.target.files,
      }); 
     
  }
  
  public onFileUpload = () =&gt; { 
      if (!this.state.selectedFile) {
          return;
      }
      
      const formData = new FormData();
      for (const file of this.state.selectedFile) {
          formData.append(`File`, file);
      }
      // Request made to the backend api 
      this.WellsStore.postWellFile(this.state.well.id, formData)
          .then(data =&gt; {
              if (data) {
                  this.MessageStore.addMessage('File Upload Successful', 'success');
                  this.WellsStore.getWellDetails(this.state.well.id);
                  this.setState({
                      isDirty: false,
                      selectedFile: [],
                  });
                  const fileInput = document.getElementById(&quot;file&quot;) as any;
                  if (fileInput)
                  {
                      fileInput.value = '';
                  }
              }
          });
  
  }
  
  public renderDownload = (file: any) =&gt; () =&gt; {
      if (file.name.includes('.pdf')) {
          return &lt;React.Fragment&gt;
              &lt;Button
                  color=&quot;primary&quot;
                  onClick={this.handleDownload(file)}
              &gt;Download&lt;/Button&gt;
              &lt;Button
                  color=&quot;primary&quot;
                  onClick={this.handleOpenNewWindow(file)}
              &gt;Open in New Tab&lt;/Button&gt;
          &lt;/React.Fragment&gt;;
      } 
      return &lt;Button
          color=&quot;primary&quot;
          onClick={this.handleDownload(file)}
          &gt;Download&lt;/Button&gt;;
  }
  
  public renderCategory = (file: any) =&gt; () =&gt; { 
      
     return &lt;Dropdown /&gt;;
      
  }
  
  public renderSize = (size: string) =&gt; () =&gt; {
      const sizeNum = Number(size);
      if (sizeNum &gt; 1000000) {
          return `${(sizeNum / 1000000).toFixed(2)} MB`;
      } else if (sizeNum &gt; 1000) {
          return `${(sizeNum / 1000).toFixed(2)} KB`;
      } else {
          return `${sizeNum} B`;
      }
  }
  private handleDownload = (file: any) =&gt; () =&gt; {
      return this.WellsStore.getWellFile(file.id, file.name);
  }
  public onCategoryChange = (event: any) =&gt; { 
      // Update the state 
      this.setState({ 
          isDirty: true,
          selectedFile: event.target.files,
      }); 
     
  }
  
  private handleOpenNewWindow = (file: any) =&gt; () =&gt; {
      return this.WellsStore.openWellFileInNewTab(file.id, file.name);
  }
  
  private handleDeleteFile = (index: number) =&gt; {
      const fileToDelete = this.state.well.files[index];
      this.WellsStore.deleteWellFile(fileToDelete.id)
          .then(data =&gt; {
              if (data) {
                  this.MessageStore.addMessage('File Deleted', 'success');
                  this.WellsStore.getWellDetails(this.state.well.id);
              }
          });
  }
  
  private formatWellFiles = () =&gt; {
      const files = this.state.well.files;
      const headers = [
          &quot;File Name&quot;,
          &quot;Category&quot;,
          &quot;Size&quot;,
          &quot;Uploaded By&quot;,
          &quot;Upload Date&quot;,
          &quot;Download&quot;,
      ];
      const rows = files.map(f =&gt; {
          return [
              {
                  content: f.name
              },
              {
                  content: this.renderCategory(f.category)
              },
              {
                  content: this.renderSize(f.size),
                  sortItem: Number(f.size),
                  type: 'render'
              },
              {
                  content: f.createUser
              },
              {
                  content: f.createDate
              },
              {
                  content: this.renderDownload(f),
                  type: 'render',
              },
          ];
  
      });
  
      return { headers, rows };
  }
  
  private buttonNavigation = (event: any) =&gt; {
      const $target = event.target;
      
      if ( $target.name === 'previousButton' ) {
          if (this.props.workflowHeaderItems[0].some((w: string) =&gt; w === 'Dispatches')) {
              this.props.history.push('/well/' + this.params.wellId + '/dispatches');
          } else {
              this.props.history.push('/well/' + this.params.wellId + '/contacts');
          }
      } else {
          this.props.history.push('/well/' + this.params.wellId + '/review');
      }
  }
  
  
  public render() {
      return(
          &lt;div&gt;
              &lt;Prompt when={this.state.isDirty} message={&quot;Changes have been made.\n\nPress Cancel then Press Save OR Press OK to continue without saving.&quot;} /&gt;
              &lt;WorkflowHeader wellSetupComplete={this.state.well.wellSetupComplete} workflowHeaderItems={this.props.workflowHeaderItems}/&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;FormGroup&gt;
                          &lt;Label&gt;Upload File&lt;/Label&gt;
                          &lt;Input
                              type=&quot;file&quot;
                              name=&quot;file&quot;
                              id=&quot;file&quot;
                              multiple={true}
                              onChange={this.onFileChange}
                          /&gt;
                      &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                      &lt;Button
                          color=&quot;primary&quot;
                          onClick={this.onFileUpload}
                      &gt;
                          Upload File
                      &lt;/Button&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                      &lt;DataTable
                          list={this.formatWellFiles()}
                          onDelete={this.handleDeleteFile}
                      /&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;ButtonRow&gt;
                  &lt;WellRevertCloseButton /&gt;
              { &lt;WellCloseButton /&gt;}
                  { this.WellsStore.canUpdateWell() &amp;&amp; &lt;EButton color=&quot;primary&quot; name=&quot;save&quot; onClick={this.updateWellModel}&gt;Save&lt;/EButton&gt;}
                  &lt;Button className=&quot;secondary&quot; name=&quot;previousButton&quot; onClick={this.buttonNavigation}&gt;Previous&lt;/Button&gt;
                  &lt;Button className=&quot;secondary&quot; name=&quot;nextButton&quot; onClick={this.buttonNavigation}&gt;Next&lt;/Button&gt;
                  &lt;WellFooter /&gt;
              &lt;/ButtonRow&gt;
  
          &lt;/div&gt;
      );
  }
    }
  
     export default withRouter(WellFiles);
  </code></pre>