ReactJS zad.3 (Losowanie do odpowiedzi/grupy)

				
					import React, { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
function App() {
  
  const liczba_osob_w_klasie = useRef();
  const ile_osob = useRef();

  const [wylosowanie_numery, setWylosowanieNumery] = useState([]) 

  function random_number(max) {
    return Math.floor(Math.random() * max + 1);
  }

  function displayNumbers() {
    return wylosowanie_numery.join(', ');
  }

  function clearForm(e){
    setWylosowanieNumery([]);
  }

  function sendForm(e) {
    e.preventDefault();
    const liczbaOsob = parseInt(liczba_osob_w_klasie.current.value);
    const ileOsobDoWylosowania = parseInt(ile_osob.current.value);

    console.log("Liczba osób w klasie: " + liczbaOsob);
    
    if (liczbaOsob > 0 && ileOsobDoWylosowania > 0) {
      const nowoWylosowane = [];
      for (let i = 0; i < ileOsobDoWylosowania; i++) {
        nowoWylosowane.push(random_number(liczbaOsob));
      }
      setWylosowanieNumery([...nowoWylosowane]);
    }
  }

  return (
    <div className="container mt-5">
      <form className="form-group">
        <div className="mb-3">
          <label className="form-label">Liczba osób w klasie:</label>
          <input 
            type='number' 
            ref={liczba_osob_w_klasie} 
            className="form-control" 
          />
        </div>

        <div className="mb-3">
          <label className="form-label">Ile osób wylosować:</label>
          <select ref={ile_osob} className="form-select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>

        <div className="mb-3">
          <button onClick={sendForm} className="btn btn-primary me-2">Losuj</button>
          <button onClick={clearForm} className="btn btn-secondary">Wyczyść</button>
        </div>
      </form>

      <div className="mt-3">
        <strong>Wylosowane numery:</strong> {displayNumbers()}
      </div>
    </div>
  );
}

export default App;