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 :)

Not getting your question much. You are already passing data to parent through handleSubmit. Then what you want to do now? Can you elaborate more? — Surjeet Bhadauriya, Feb 08 '21 at 09:45
Does this answer your question? [How to access child's state in React?](https://stackoverflow.com/questions/27864951/how-to-access-childs-state-in-react) — , Feb 08 '21 at 09:56

score 0 · Accepted Answer · answered Feb 08 '21 at 09:53

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>
  );
}

Thank you so much Yovcho ! And if I wanted to store this data passed in the App within an array (that will save this first piece of data and add new elements to the array when sending another request?) — djou0501, Feb 08 '21 at 11:26
Well, as far as I see, in this case it would be better to generate an object in the onSubmit, based on the state let resultObject = { nameOwner , locationOwner } — yovchokalev, Feb 08 '21 at 11:32

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

1 Answers1