title: How to make an option only once selectable in react?
body: <p>I'm still working on my columns interface, now I'm at the part where users can add tags to a column.<br/>
  However, I want some tags to be only selectable once.<br/>
  Once a specific tag has been selected/added the option should be removed from the select.<br/>
  I have no idea how to achieve this.<br/></p>
  
  <p>My code is already found online in this pen: <a href="https://codepen.io/darkinfore/pen/daJxyP?editors=0110" rel="nofollow noreferrer">https://codepen.io/darkinfore/pen/daJxyP?editors=0110</a><br/></p>
  
  <p>You can add and remove tags in this pen to see it for yourself.<br/>
  The adding and removing system works but I want some tags to only be added once.<br/>
  I'm adding a tag after an option is selected.<br/></p>
  
  <p><strong>This is the code for the select hardcoded:</strong></p>
  
  <pre><code>&lt;select value="" className="autocomplete-select" style={{border: "0px", outline: "none", width: "90px", height: "18px"}} id={props.index} onChange={props.onaddtag}&gt;
      &lt;option value="" disabled &gt;&lt;/option&gt;
      &lt;option value="URL"&gt;URL&lt;/option&gt;
      &lt;option value="SUBTITLE"&gt;SUBTITLE&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p><strong>And my onaddtag function:</strong></p>
  
  <pre><code>onaddtag(e: any){
      const array = this.state.fields.columns;
      const newArray = [ ...array[e.target.id].tags, {name: e.target.value, attributes: [] } ];
      array[e.target.id].tags = newArray;
      this.setState({ fields: { columns: array } });
      this.setState({ canSave: true });
      console.log(this.state.fields.columns);
    }
  </code></pre>
  
  <p>Can someone make this for me or explain how to achieve this?</p>