Webówka 16.01

import 'bootstrap/dist/css/bootstrap.css'
import {useState } from 'react';

function App() {

  const [flowerTag, setFlowers] = useState(true)
  const [animalTag, setAnimals] = useState(true)
  const [carTag, setCars] = useState(true)

  const switchArr = [flowerTag, animalTag, carTag];

  const [stateData, setStateData] = useState([
    {id: 0, alt: "Mak", filename: "obraz1.jpg", category:1, downloads: 35},
    {id: 1, alt:"Bukiet", filename: "obraz2.jpg", category: 1, downloads: 43},
    {id: 2, alt:"Dalmatyńczyk", filename: "obraz3.jpg", category:2, downloads: 2},
    {id: 3, alt:"Świnka morska", filename: "obraz4.jpg", category:2, downloads: 53},
    {id: 4, alt:"Rotwailer", filename: "obraz5.jpg", category:2, downloads: 43},
    {id: 5, alt:"Audi", filename: "obraz6.jpg", category:3, downloads: 11},
    {id: 6, alt:"kotki", filename: "obraz7.jpg", category:2, downloads: 22},
    {id: 7, alt:"Róża", filename: "obraz8.jpg", category:1, downloads: 33},
    {id: 8, alt:"Świnka morska", filename: "obraz9.jpg", category:2, downloads: 123},
    {id: 9, alt:"Foksterier", filename: "obraz10.jpg", category:2, downloads: 22},
    {id: 10, alt:"Szczeniak", filename: "obraz11.jpg", category:2, downloads: 12},
    {id: 11, alt:"Garbus", filename: "obraz12.jpg", category:3, downloads: 321}
  ]);
  function incrementDownloads(id) {
    const nextStateData = stateData.concat([]);
    for (let i = 0; i < nextStateData.length; i++) {
      const elem = nextStateData[i];
      if (elem.id == id) {
        const newElem = {...elem, downloads: elem.downloads+1};
        const newState = [...nextStateData];
        newState[i] = newElem;
        setStateData(newState);
        return;
      }
    }
  }

  return (
    <div className="container">
      <h1>Kategorie zdjęć</h1>
      <div className="form-check form-switch form-check-inline">
        <input type="checkbox" role="switch" className='form-check-input' name="kwiaty" id="" defaultChecked='true' onChange={(event) => setFlowers(event.target.checked)}/>
        <label htmlFor="kwiaty" className="form-check-label">Kwiaty</label>
      </div>
      <div className="form-check form-switch form-check-inline">
        <input type="checkbox" role="switch" className='form-check-input' name="zwierzęta" id="" defaultChecked='true' onChange={(event) => setAnimals(event.target.checked)}/>
        <label htmlFor="zwierzęta" className="form-check-label">Zwierzęta</label>
      </div>
      <div className="form-check form-switch form-check-inline">
        <input type="checkbox" role="switch" className='form-check-input' name="samochody" id="" defaultChecked='true' onChange={(event) => setCars(event.target.checked)}/>
        <label htmlFor="samochody" className="form-check-label">Samochody</label>
      </div>

      <div className='row g-0'>
      { stateData.filter((elem) => switchArr[elem.category-1] ).map((elem, index) => {
        return (
          <div key={index} style={{width: "auto"}}>
            <img src={"./assets/"+elem.filename} alt={elem.alt} className='rounded' style={{margin: "5px"}}></img>
            <h4>Pobrań: {elem.downloads}</h4>
            <input type="button" value="Pobierz" className='btn btn-success' onClick={() => incrementDownloads(elem.id)}/>
          </div>
          )
      }
      )}

      </div>

    </div>
  );
}

export default App;