remove option from second select if already selected in reactjs

Question

I have two select input to select years (years,years_1) , when i change years to 2020 i want to remove 2020 from years_1 but when i change years to 2021 then in years_1 2020 must add back and 2021 will remove (or disable also work).

  useEffect(() => {
    const currentYear = new Date().getFullYear();
    const yearsArray = [];
    for (let i = currentYear; i > currentYear - 3; i--) {
      yearsArray.push(i.toString());
      yearsArray.sort();
    }
    setYears(yearsArray);
    setYears_1(yearsArray);
    setCommonYear(yearsArray);
  }, []);

there setYears,setYears_1,setCommonYear are useStates to store year array.

if (years !== null && years_1 !== null) {
      if (years.includes(value)) {
        setYears_1((prevState) => prevState.filter((item) => item !== value));
      } else {
        setYears_1(commonYear);
      }
    }

this is what i have tried

                            <select
                            name="year"
                            value={turnoverModels?.year}
                            onChange={handleChangeTurnoverYear}
                            
                          >
                            <option value="NA" selected>
                              NA
                            </option>
                            {years.map((item) => (
                              <option key={item} value={item}>
                                {item}
                              </option>
                            ))}
                          </select>
                          <select
                            name="year"
                            value={turnoverModels?.year}
                            onChange={handleChangeTurnoverYear}
                            
                          >
                            <option value="NA" selected>
                              NA
                            </option>
                            {years_1.map((item) => (
                              <option key={item} value={item}>
                                {item}
                              </option>
                            ))}
                          </select>

Answer 1

Added state to store the values of both the select dropdowns. Then we can use the useEffect() hook to find when the value of first select changes and update the years_1 array.

Demo : Codesandbox

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [years, setYears] = useState([]);
  const [years_1, setYears_1] = useState([]);
  const [select1, setSelect1] = useState(null);
  const [select2, setSelect2] = useState(null);

  useEffect(() => {
    const yearsArray = getYears();
    setYears(yearsArray);
    setYears_1(yearsArray);
  }, []);

  // When the first year changes, update the years_1 array
  useEffect(() => {
    if (!select1) return;
    const filtered = getYears().filter((y) => y !== select1);
    setYears_1(filtered);
  }, [select1, years_1]);

  const getYears = () => {
    const currentYear = new Date().getFullYear();
    const yearsArray = [];
    for (let i = currentYear; i > currentYear - 3; i--) {
      yearsArray.push(i.toString());
      yearsArray.sort();
    }
    return yearsArray;
  };

  return (
    <div className="App">
      <select
        name="year"
        value={select1}
        onChange={(e) => setSelect1(e.target.value)}
      >
        <option value="NA" selected>
          NA
        </option>
        {years.map((item) => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
      <select
        name="year"
        value={select2}
        onChange={(e) => setSelect2(e.target.value)}
      >
        <option value="NA" selected>
          NA
        </option>
        {years_1.map((item) => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </div>
  );
}

Answer 2

setYears_1 again when select in years array:

Example: https://codesandbox.io/s/winter-sky-hbm8ec?file=/src/App.js

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [years, setYears] = useState([]);
  const [years_1, setYears_1] = useState([]);
  const [select1, setSelect1] = useState(null);
  const [select2, setSelect2] = useState(null);

  useEffect(() => {
    const yearsArray = getYears();
    setYears(yearsArray);
    setYears_1(yearsArray);
  }, []);

  useEffect(() => {
    if (!select1) return;
    const filtered = getYears().filter((y) => y !== select1);
    setYears_1(filtered);
  }, [select1, years_1]);

  const getYears = () => {
    const currentYear = new Date().getFullYear();
    const yearsArray = [];
    for (let i = currentYear; i > currentYear - 3; i--) {
      yearsArray.push(i.toString());
      yearsArray.sort();
    }
    return yearsArray;
  };

  return (
    <div className="App">
      <select
        name="year"
        value={select1}
        onChange={(e) => setSelect1(e.target.value)}
      >
        <option value="NA" selected>
          NA
        </option>
        {years.map((item) => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
      <select
        name="year"
        value={select2}
        onChange={(e) => setSelect2(e.target.value)}
      >
        <option value="NA" selected>
          NA
        </option>
        {years_1.map((item) => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </div>
  );
}