import { useEffect, useState } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
function App() {
  const [profile, setProfile] = useState({
    name: 'Jamie', age: 33, hobby: ['drawing', 'cooking']
  });
  const handleChangeEvent = (e) => {
    const { name, value } = e.target;
    console.log('e.target', e.target)
    profile[name] = value; // mutating update
    // setProfile(prev => ({
    //   ...prev,
    //   [name]: value
    // })) // immutating update
  };
  return (<div>
      <h1>Profile Edit</h1>
      <label for="name">name: </label>
      <input value={profile.name} name="name" type="text" onChange={handleChangeEvent}/>
      <br /><br />
      <label for="age">age: </label>
      <input value={profile.age} name="age" type="text" onChange={handleChangeEvent}/>
      <br /><br />
      <h2>Profile checking</h2>
      <p>
        Your name: {profile.name}
        <br />
        Your age: {profile.age}
      </p>
      
      
  </div>)
}

ReactDOM.render(<App />, document.querySelector("#app"));