title: 2 dropdown select option iterating through same array but should not be able to select same selected value (ReactJS)
body: <p>Currently I am trying to build 2 dropdown select option component that only shows columns, but the point is that it should not display the already selected value in other dropdown select option. So each value can only be selected once. So how can I fix that in the code.</p>
  <p><a href="https://codesandbox.io/s/github/chiholiu10/cryptomaniak?file=/src/components/Table/TableFilter/TableDropdownFilter.tsx" rel="nofollow noreferrer">Click here to go to Codesandbox</a></p>
  <p>Parent component</p>
  <pre><code>    return (
          &lt;div&gt;
              &lt;TableDropdownFilter
                  columns={columns}
                  onSelect={setHiddenCol1}
              /&gt;
              &lt;TableDropdownFilter
                  columns={columns}
                  onSelect={setHiddenCol2}
              /&gt;
              &lt;Table
                  columns={columns}
                  data={data}
                  hiddenColumnsOne={hiddenCol1}
                  hiddenColumnsTwo={hiddenCol2}
              /&gt;
          &lt;/div&gt;
      )
  </code></pre>
  <p>Child component</p>
  <pre><code>interface TableDropdownProps {
      columns: any;
      onSelect: any;
      firstFilter?: string;
      secondFilter?: string;
  }
  
  export const TableDropdownFilter: FC&lt;TableDropdownProps&gt; = ({
      columns,
      onSelect,
      firstFilter,
      secondFilter
  }) =&gt; {
      const [columnShow, setColumnShow] = useState&lt;string&gt;(&quot;&quot;);
      const [openDropdown, setOpenDropdown] = useState(false);
      const wrapperRef = useRef(null);
  
      const useOutsideAlerter = (ref: any) =&gt; {
          useEffect(() =&gt; {
              const handleClickOutside = (event: MouseEvent) =&gt; {
                  if (ref.current &amp;&amp; !ref.current.contains(event.target)) {
                      setOpenDropdown(false)
                  }
              }
  
              document.addEventListener(&quot;mousedown&quot;, handleClickOutside);
              return () =&gt; {
                  document.removeEventListener(&quot;mousedown&quot;, handleClickOutside);
              };
          }, [ref]);
      }
  
      useOutsideAlerter(wrapperRef)
  
      const dropdownFilter = (selectedColumn: string) =&gt; {
          setColumnShow(selectedColumn);
          setOpenDropdown(false);
          onSelect(selectedColumn);
      }
  
      const toggleDropdownOpen = () =&gt; setOpenDropdown(!openDropdown);
      console.log(firstFilter, secondFilter);
      return (
          &lt;TableFilter&gt;
              &lt;TableFilterBlock ref={wrapperRef}&gt;
                  &lt;TableFilterInput onClick={() =&gt; toggleDropdownOpen()}&gt;
                      {columnShow.length &gt; 0 ? columnShow : &quot;Select&quot;}&lt;/TableFilterInput&gt;
                  {typeof columnShow}
                  &lt;TableFilterDropdown toggleDropdown={openDropdown}&gt;
                      {columns.slice(1).map((item: any, index: number) =&gt; (
  
                          &lt;TableDropdownList key={index}&gt;
                              &lt;div onClick={() =&gt; dropdownFilter(item.id)}&gt;
                                  {item.id}
                              &lt;/div&gt;
                          &lt;/TableDropdownList&gt;
                      ))}
                  &lt;/TableFilterDropdown&gt;
              &lt;/TableFilterBlock&gt;
          &lt;/TableFilter&gt;
      )
  }
  </code></pre>