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>
);
}
Source: stackoverflow.com
Related Query
- Passing data of a Child's form to Parent (App) in React
- passing data from child to parent component - react - via callback function
- Passing data to parent in React
- Pass form data to parent class in react
- Passing data to parent component in react
- Passing API data from parent container to child component in React
- React router dom passing data from parent component to child router component does not pass the props.match
- React - Passing child data to parent - wrong checkbox value
- Passing data from child to parent component not working in react
- Share form data value from child component to parent component - React js
- Passing data down to child on event triggered in parent in React
- Passing data from a react form to expressJS and also redirecting to the PayuMoney website to make payment
- The correct way to store complex form data in React app
- Passing data from child to parent in React shows type error
- Passing data to parent - recipebook React
- React passing data from child -> parent -> another child
- React - Passing data to Grand parent Component
- Unable to pass React form data from a Child component to a Parent Component
- React - parent passing data to child becomes undefined
- React passing data from parent to child component using context doesn't work
- Passing data from parent to child in React using useState problem
- Re render child component depending on child action while passing data to parent in React
- Passing data from a single JSON file from parent to child component in React using dynamic routes
- Get consolidated data from all the child components in the form of an object inside a parent component : React JS
- react passing data from parent to child component
- Struggling in passing data from Child to Parent React Component. Cannot update a component (`App`) while rendering a different component (`Table`)
- React - Passing data from child to parent component
- Passing data into a React component within existing app
- Passing session user data into a form to edit in react using nextjs
- In React, how to fix the infinite/loop data passing from the child component to parent react functional component
More Query from same tag
- ScrollView child layout must be applied through the contentContainerStyle prop
- Can map on first render but on refresh shows cannot map of undefined
- React update component after loading data
- How to dynamically update the value for any input field with one event handler function, using hooks
- React JVectorMap marker
- React Native - Why do I need babel or webpack?
- Javascript get Date format in H:M:S using react js
- Is it possible to set a form input to 0px height?
- Fetch data from multiple pages of an API in react native
- How to open/close antd Submenu programatically
- serialize-javascript vulnerability found in yarn.lock
- Axios post method in react isn't working: suggestions?
- Generic type of React.Component
- Using material-UI's Grid component, how do I nest a table within another table?
- How to auto generate a custom ID for each record in a MongoDb collection?
- Can Reactjs programmatically handle :before?
- Create grid from 2 specific elements
- CRA Advanced Configurations from Terminal?
- get value of list item with click event in React
- Add pages to dynamic routes on runtime Next Js
- Initialize Components by String
- React router doesn't work after deploying
- How to set the handler for multiple checkboxes in react?
- CSP and PDF ad data-blob in iFrame causes rejection
- How to remove margin or padding added to the top of page from using bootstrap 4.4.1 when printing using window.print and selecting thinner paper size?
- How can i dynamically disable a Fluent UI button?
- How can you programmatically resize a column using react-table
- how to animate text when it updates using react-spring?
- Why is child component re-rendering if only prop has useCallback?
- Set header using in React (ajax)