0

I have an input with label "Ilosc osob". When I change it, I want to change the Select's options, depends of number in input. It happens, but with one step gap. What should I do? matchedTables depends on props.tables, and it is filtered array from parent component.

const ReservationForm = (props) => {
const [enteredSize, setEnteredSize] = useState("");
  const [enteredTable, setEnteredTable] = useState("");
  const [enteredDate, setEnteredDate] = useState("");
  const [enteredTime, setEnteredTime] = useState("");
  const [sizeMatchedTables, setSizeMatchedTables] = useState([
    { id: 55, table_size: 1, isBusy: false },
    { id: 56, table_size: 2, isBusy: true },
  ]);
//some code

const matchingSizeTablesHandler = () => {
    const newArray = props.tables.filter((tables) => {
      if (tables.table_size >= enteredSize) {
        return tables;
      }
    });
    setSizeMatchedTables(newArray);
  };

const sizeChangeHandler = (event) => {
    setEnteredSize(event.target.value);
    matchingSizeTablesHandler();
  };
//some code

return(
<div>
 <div className="new-reservation__control">
          <label>Ilość osób</label>
          <input
            type="number"
            min={1}
            max={10}
            value={enteredSize}
            onChange={sizeChangeHandler}
          />
        </div>
    <select
                className="new-reservation__control"
                value={enteredTable}
                onChange={tableChangeHandler}
              >
                <TablesInSelect passedOptions={sizeMatchedTables} />
              </select>
</div>
)};

    const TablesInSelect = (props) => {

      return (
        <>
          {props.passedOptions.map((option, index) => {
            return (
              <option key={index} value={option.id}>
                {option.id}
              </option>
            );
          })}
        </>
      );
    };
cguy
  • 1
  • 1
  • Your code makes no mention of 'Ilosc osob', it would be great if you showed that as well as it would make it easier to help you. – Khalil Jul 13 '22 at 17:21
  • `sizeMatchedTables` has only two items in it, what if the `Ilosc osob` number is greater than the length of `sizeMatchedTables`? – Khalil Jul 13 '22 at 17:49
  • @Khalil `sizedMatchedTables` could be 0 to 6 elements, depends how big is integer in `ilosc osob`. `props.tables` is `{ id: 1, table_size: 1, isBusy: false }, { id: 2, table_size: 2, isBusy: true }, { id: 3, table_size: 2, isBusy: false }, { id: 4, table_size: 3, isBusy: true }, { id: 5, table_size: 3, isBusy: true }, { id: 6, table_size: 4, isBusy: true },` and based on this array i want to create `sizeMatchedTables` with those ones matching input. Its working good, but when i change input, `select` always shows me one step before. – cguy Jul 13 '22 at 17:55
  • Example: input "1" -> select - 6 elements, input '2' -> 6 elements, input '1' -> 5 elements - this should be to input 2, – cguy Jul 13 '22 at 18:02

1 Answers1

0

I found workaround this problem, but dont think its best way to do this. I changed matchingSizeTableHandler so it work with argument (and also change filter to reduce but it is not the case):

const matchingSizeTablesHandler = (size) => {
    const newArray = props.tables.reduce((newTables, tables) => {
      if (tables.table_size >= size) {
        var newValue = tables;
        newTables.push(newValue);
      }
      if (size === "") newTables = [];
      return newTables;
    }, []);
    setSizeMatchedTables(newArray);
  };

and then, in sizeChangeHandler I changed call out matchingSizeTableHandler with event.target.value parameter

const sizeChangeHandler = (event) => {
    setEnteredSize(event.target.value);
    matchingSizeTablesHandler(event.target.value);
  };

. If someone can explain to me the other way to implement this, using the sizeMatchedTable state as a parameter in matchingSizeTablesHandler function, I would be thankful.

cguy
  • 1
  • 1