import React, { useState } from "react";
import { HobbyList } from "./Child";
import "./style.css";

function App() {
  const hobbies = ["playing", "singing", "shooting"];

  const [hobbiess, setHobbies] = useState(hobbies);

  const handleDelete = (hobbo) => {
    const hob = hobbiess.filter((hobby) => hobby !== hobbo);
    setHobbies(hob);
  };

  return (
    <div className="App">
      {hobbiess.map((hobby) => (
        <HobbyList key={hobby} hobby={hobby} handleDelete={handleDelete} />
      ))}
    </div>
  );
}

export default App;


// Child Component 

import React, { useState } from "react";

export const HobbyList = (props) => {
  const [checkBox, setCheckBox] = useState(false);
  const handleCheckBox = () => {
    setCheckBox(!checkBox);
  };

  console.log(props);

  return (
    <div style={{ display: "flex" }}>
      <input type="checkbox" onChange={handleCheckBox} />
      <div>{props.hobby}</div>
      {checkBox ? (
        <button onClick={() => props.handleDelete(props.hobby)}>delete</button>
      ) : null}
    </div>
  );
};