title: React JS custom table - handling select dropdown in table
body: <p>A bit of context for this table - I want to create a table where user can select an option in the dropdown on the table header and compare. So this table has two columns and each column represents the data that's been selected.</p>
  <p>What I want to achieve is when one is selected say <code>business</code> in column one, how can I disable <code>business</code> / prevent it from being selected in column 2? As it doesn't make sense to compare two of the same ones.</p>
  <p>Also is there a better way to handle the onChange for the two select dropdowns? At the moment I have two methods and they are quite similar. I've tried to have only one onChange method but was not able to prevent both from changing when one is selected.</p>
  <p>Here's what I've done so far my table:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const Table = () =&gt; {
    const [plan, setPlan] = useState(&quot;business&quot;);
    const [planToCompare, setPlanToCompare] = useState(&quot;pro&quot;);
  
    const handleChange = (e) =&gt; {
      e.preventDefault();
      setPlan(e.target.value);
    };
  
    const handleChange2 = (e) =&gt; {
      e.preventDefault();
      setPlanToCompare(e.target.value);
    };
  
    const data = [
      {
        business: [&quot;Lorem&quot;, &quot;Ipsum&quot;, &quot;Dolor sit amet&quot;],
        pro: [&quot;Lorem 1&quot;, &quot;Ipsum 2&quot;, &quot;Dolor sit amet 3&quot;],
        free: [&quot;Lorem 4&quot;, &quot;Ipsum 5&quot;, &quot;Dolor sit amet 6&quot;]
      }
    ];
  
    const renderData = (plan1, plan2) =&gt; {
      const arr = data[0][plan1];
      const arr2 = data[0][plan2];
  
      return arr.map((item, index) =&gt; (
        &lt;tr key={`plan_${index + 1}`}&gt;
          &lt;td&gt;{item}&lt;/td&gt;
          &lt;td&gt;{arr2[index]}&lt;/td&gt;
        &lt;/tr&gt;
      ));
    };
  
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;
                &lt;select datachosen={plan} onChange={(e) =&gt; handleChange(e)}&gt;
                  &lt;option value={&quot;business&quot;}&gt;Business&lt;/option&gt;
                  &lt;option value={&quot;pro&quot;}&gt;Pro&lt;/option&gt;
                  &lt;option value={&quot;free&quot;}&gt;Free&lt;/option&gt;
                &lt;/select&gt;
              &lt;/th&gt;
              &lt;th&gt;
                &lt;select
                  id={&quot;select2&quot;}
                  datachosen={planToCompare}
                  onChange={(e) =&gt; handleChange2(e)}
                &gt;
                  &lt;option value={&quot;pro&quot;}&gt;Pro&lt;/option&gt;
                  &lt;option value={&quot;free&quot;}&gt;Free&lt;/option&gt;
                  &lt;option value={&quot;business&quot;}&gt;Business&lt;/option&gt;
                &lt;/select&gt;
              &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;{renderData(plan, planToCompare)}&lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  };
  
  export default Table;
  </code></pre>
  <p>Here's a working <a href="https://codesandbox.io/s/great-moore-kpeo8?" rel="nofollow noreferrer">codesandbox</a> for a full view</p>