score:0
you can pass the data from child to parent by calling a function passed from parent
with the data you want to send as a parameter - like an event handler callback.
let's say if you want to send students
of your child component to parent when you click on an element:
const parent = () => {
const onupdate = (data) => {
// use the data
};
return (
<div classname='container'>
<div classname='row'>
<div classname='col-12'>
<div classname='one'>
<child update={onupdate}></child>
</div>
</div>
</div>
</div>
)
}
const child = ({ update }) => {
const students = ['jasmine', 'stella']
return (
<div classname='container'>
<div classname='row'>
<div classname='col-12'>
<button click={() => update(students)} />
</div>
</div>
</div>
)
}
but if you have to pass data between components nested deeply, you should consider to use redux
or context
.
score:0
to do this, you have two easiest ways,
- use react context
- use react prop callback
i suggest you use the first way and here is an example of implementing the redux context feature into your app based on your question's codes.
Source: stackoverflow.com
Related Query
- How to pass an Array from Child component to Parent component using hooks in react
- How to pass an Array from Parent Component to Child Component in react by using Statefull Component?
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- How to reset child component from parent using React Context and Hooks
- ReactJS How to pass iterated values to child component from parent component using Context API
- How to call Child function from Parent / Pass Props to a Parent component without using ref methods?
- How do I pass stateful array from child to parent component? React Hooks
- How to pass a Json array of objects from a child class component to parent class component in React?
- How to pass Array from Parent component to Child component in reactjs
- How to pass a json array that comes from backend to child component using props and react hooks?
- How to pass an Array from Child component to Parent Component in react
- How to properly pass an array from a parent React class component state to a child component written with hooks?
- How to pass updated array object to parent component from child component in reactJs
- How can i pass data from child component to parent component which in above second level by using function base in React?
- Pass datas from child to parent component using Hooks
- How to pass Array of Objects from Parent Component to Child Component in react
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How to use react hooks to pass a state from child component to the parent component?
- How do i pass a value from child component to parent component using function?
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- How to use onClick event to pass the props from child component to parent component React Hooks
- How to pass onclick method to child component from parent using react, typescript, and styled-component?
- Using React, how do you pass a function from a parent component to a child component and run it in the useEffect hook?
- How to pass data from child component to its parent in ReactJS?
- How to prevent child component from re-rendering when using React hooks and memo?
- How to pass function as props from functional parent component to child
- How to pass value from parent component to child component (react)
- How do i pass data up from a child web component to it's direct parent element
- How to pass input value from child to parent component react
More Query from same tag
- How do I create a globally accessible variable in React JS
- How to initiate var in script tag?
- Best solution binding for ReactJs?
- how to align a grid item center in material-ui in react?
- ReactJS ,Intersection Observer , GSAP (don't animate out)
- Idiomatic way to cache computed values based on the state in React?
- Passing a list form the front-end (react) to the back-end (django)
- ckeditor4 editorConfig and editorUrl is not working in react?
- React hooks, one for each child
- React-router 2.0 browserHistory doesn't work when refreshing
- Passing props from StackNavigator to screen with React Navigation
- How can I render an ArrayBuffer (PNG image) directly as an image in React?
- How to convert a string into JSX in React 17
- React native JAVA_HOME is set to an invalid directory
- Receive single React element child in console
- React Component with Memory Leak
- React: How to create table from the following json
- Twilio.Device.connect() not sending body to Express
- How to download file with client in ASP.NET Core and react?
- i is not defined for loop in react project
- React, Redux, mapStateToProps and no rerendering despite state changes
- Multiple Nested Routes in react-router-dom v4
- Spreading props in react while maintaining reference equality
- How can I unit test a component which dispatches an action in reactjs/redux app?
- Meteor React tutorial interacting with mongo not working
- Calll states, and class methods inside Object.keys().map in render
- How to use TypeScript declaration files alongside JavaScript
- React keep old state - new state not updated
- ReactJS - Add slug to url (dynamic slug in frontend)
- High frequency counter in Reactjs