Passing data of a Child's form to Parent (App) in React

Question

I am trying to build an app and I am being stuck now I would like to pass the data (nameOwner, locationOwner, plantsOwner, startDateOwner, endDateOwner) from a Child's form to its parent (App)

How can I make this happen without getting the form duplicated in my App?

Here is the CHILD form

function PlantOwnerForm(props)  {

  const [nameOwner , setNameOwner] = React.useState('');
  const [locationOwner , setLocationOwner] = React.useState('');
  const [plantsOwner , setPlantsOwner] = useState(0);
  const [startDateOwner, setStartDateOwner] = useState('');
  const [endDateOwner, setEndDateOwner] = useState('');
      
//Handle change for town and radius
  function handleChange(event) {
    // console.log('event: ', event)
    // console.log(event.target.value)
    switch (event.target.name) {
      case "name":
        setNameOwner(event.target.value);
        break;
      case "plants":
        setPlantsOwner(event.target.value);
        break;
      case "location":
        setLocationOwner(event.target.value);
        break;
      default:
        break;
    }
 }

// Submitting the form
  function handleSubmit(event) {
      event.preventDefault();
      console.log(
      `A request has been logged: 
      From ${nameOwner} in ${locationOwner} for ${plantsOwner} plant(s) from ${startDateOwner} to ${endDateOwner}
      `);
      props.parentCallback(nameOwner)
      setLocationOwner("");
      setNameOwner("");
      setPlantsOwner(0);
      setStartDateOwner("");
      setEndDateOwner("");
  }

 
    return (
      <div>
        <form onSubmit={handleSubmit}> 
          <BasicInfoForm
            name={nameOwner}
            handleChange = {handleChange}
            location = {locationOwner}
            addPlant = {addPlant}
            removePlant = {removePlant}
            plants={plantsOwner}
          />
         
          <Calendar
            startDate={ startDateOwner }
            endDate={ endDateOwner }
            handleChangeDates={ handleChangeDates }
          />
          <button> Let's find my Plant-Sitter !</button>
       </form>
      </div>
    )
}

export default PlantOwnerForm;

Here is the parent

function App() {

  // to get the data from PO form
  function handleOwnerData(nameOwner) {
    console.log(`data: ${nameOwner}`)
    }

  return (
    <div>
 
          <PlantOwnerForm parentCallback={handleOwnerData} />
 
    </div>
  );
}

How can I only get the data from the form and not the entire form?

THANKS A LOT :)

Answer 1

There are two ways to pass a data to your parent, using state management(which means you have a general state you can access from everywhere. For example redux) Or lifting state up(the way you did it). The way to do it properly is to take all the use states from PlantOwnerForm, put them in app and on submit you need to set the state in the parent component. Like that:

function PlantOwnerForm(props)  { 
  function handleChange(event) { //Handle change for town and radius
    props.onChange(event)
 }

// Submitting the form
  function handleSubmit(event) {
      event.preventDefault();
      console.log(
      `A request has been logged: 
      From ${nameOwner} in ${locationOwner} for ${plantsOwner} plant(s) from ${startDateOwner} to ${endDateOwner}
      `);
      props.onSubmit(event) // you pass the data from the submit to the parent
  }
  
  return (
      <div>
        <form onSubmit={handleSubmit}> 
          <BasicInfoForm
            name={nameOwner}
            handleChange = {handleChange}
            location = {locationOwner}
            addPlant = {addPlant}
            removePlant = {removePlant}
            plants={plantsOwner}
          />
         
          <Calendar
            startDate={ startDateOwner }
            endDate={ endDateOwner }
            handleChangeDates={ handleChangeDates }
          />
          <button> Let's find my Plant-Sitter !</button>
       </form>
      </div>
    )
}

export default PlantOwnerForm;

Then in the App:

function App() { //initialise useState()
  function handleOwnerData(event) {
    // set the state here
    }

function handleChange(event) {// handle the changes}
   return (
    <div>
        <PlantOwnerForm onChange(handleChange) onSubmit={handleOwnerData} />
    </div>
  );
}