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

export default function App() {
  const [data, setData] = useState(
    {
      1: false,
      2: false,
      3: false,
      4: false,
      5: false
    });


  const handleOnClick = (id) => {
    setData((p) => ({ ...p, [id]: !p[id] }));
  };

  return (
    <div className="App">
      <h1>Hello React.</h1>
      <h2>Start editing to see sompen!</h2>
      {Object.keys(data).map((key_id) => (
        <input
          type="checkbox"
          checked={data[key_id]}
          onChange={() => handleOnClick(key_id)}
          defaultValue={false}
        />
      ))}
    </div>
  );
}