从react js中的多个选择下拉列表中获取相同的值

Question

I won't do to like this. I have a basket and here I have five apples. I want to divide it into five-person. If a user takes 2 items from here. Then the next person will have to be available 3 items. If this person takes 2 items then the basket has only 1 item. The five-user will be like

  <select>
    <label>userOne</label>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  {/* userOne selected 2 */}
  <select>
    <label>userTwo</label>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    {/* removed automaticaly 4 and five option */}
    {/* <option>4</option>
    <option>5</option> */}
  </select>
  {/* userTwo select 2 */}
  <select>
    <label>userThree</label>
    <option>0</option>
    <option>1</option>
    {/* <option>2</option>
    <option>3</option> */}
    {/* 3-2 = 1 */}
  </select>
  {/* userFour have only one  */}
  <select>
    <label>userFour</label>
    <option>0</option>
    <option>1</option>
    {/* <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option> */}
  </select>
  {/* userFour already selected one */}
  <select>
    <label>userFive</label>
    <option>0</option>
    {/* userFive have no item available */}
    {/* <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option> */}
  </select>

Answer 1

As far as I understand, you want to filter the list of options depending on the selected data
For this you need to display options dynamically.
Example of such code:

import React, { useState } from "react";

const USER_COUNT = 5;
const OPTION_COUNT = 5;
const options = Array(OPTION_COUNT + 1)
  .fill(0)
  .map((_, i) => i);

function App() {
  let [users, setUsers] = useState(Array(USER_COUNT).fill(0));

  const handleChange = (idx) => (e) => {
    setUsers(
      users.map((user, userIdx) => {
        if (userIdx < idx) {
          return user;
        }
        if (userIdx === idx) {
          return +e.target.value;
        }
        return 0;
      })
    );
  };

  return (
    <div className="App">
      {users.map((user, userIdx) => {
        let prevOptionsSum = 0;
        for (let i = 0; i < userIdx; i++) {
          prevOptionsSum += users[i];
        }
        let userOptions = options.slice(0, options.length - prevOptionsSum);
        return (
          <div key={userIdx}>
            <label>user {userIdx + 1}</label>
            <select value={user} onChange={handleChange(userIdx)}>
              {userOptions.map((_, userOptionIdx) => (
                <option key={userOptionIdx}>{userOptionIdx}</option>
              ))}
            </select>
          </div>
        );
      })}
    </div>
  );
}
export default App;