React JS Update Data dari Child ke Parrent dengan Submit

Kali ini saya akan memberikan contoh code untuk submit form update data dari child ke parent di ReactJS.

Code App.jsx (Parent):

import React from "react";
import { useState } from "react";
import CreateForm from "./components/CreateForm";
import "./App.css";
function App() {
  const onCreate = (data) => {
    console.log("ini console data dari parent", data);
  };
  return (
    <>
      <CreateForm onCreate={onCreate} />
    </>
  );
}
export default App;

Code CreateForm.jsx (Child):

Struktur folder: /components/CreateForm.jsx

Berikut code-nya:

import React from "react";

import { useState } from "react";

const CreateForm = ({ onCreate }) => {

  const initialState = {

    nama: "",

    hobby: "",

    agama: "",

  };

  const [data, setData] = useState(initialState);

  const { nama, hobby, agama } = data;

  const handleSubmit = (event) => {

    event.preventDefault();

    onCreate(data);

    setData(initialState);

  };

  const handleChange = (event) => {

    setData({ ...data, [event.target.name]: event.target.value });

  };

  return (

    <div>

      <form onSubmit={handleSubmit} action="">

        <label htmlFor="">Nama </label>

        <input type="text" onChange={handleChange} value={nama} name="nama" />

        <label htmlFor="">Hobby </label>

        <input type="text" onChange={handleChange} value={hobby} name="hobby" />

        <label htmlFor="">Agama </label>

        <input type="text" onChange={handleChange} value={agama} name="agama" />

        <input type="submit" />

      </form>

    </div>

  );

};

export default CreateForm;

.