score:0

Accepted answer

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

Related Query

More Query from same tag