how to send data from child component to parent component state in reactjs
pass data from child to parent react functional component
pass data from child component to parent component react native
pass data from child component to parent component react js
how to pass value from one component to another component in reactjs
pass data from child to parent angular
react typescript pass data from child to parent
react passing data between siblings
parent component:
import React from 'react';
import './Api.scss';
import ProfileCard from 'components/Card/ProfileCard.jsx';
import Modal from 'react-awesome-modal';
// import Search from 'components/Search/Search';
class Api extends React.Component {
constructor(props) {
super(props);
this.state = {
title : '',
content: '',
img: '',
data: [],
pages: 0,
page:0
}
}
OnFileChange = (event) => {
this.setState({img: event.target.files[0]});
}
onTitleChange = (event) => {
this.setState({title: event.target.value})
}
onContentChange = (event) => {
this.setState({content: event.target.value})
}
resetForm = () => {
document.getElementById('title').value = '';
document.getElementById('content').value = '';
document.getElementById('img').value = '';
}
openModal() {
this.setState({
visible : true
});
}
closeModal() {
this.setState({
visible : false
});
}
componentDidMount() {
fetch(`http://127.0.0.1:8000/get_profile/?page=${this.state.page}`)
.then(response => response.json())
.then(res =>{
this.setState({ data: res });
this.setState({ pages: res[res.length-1].pages });
console.log(this.state.page)
});
}
SubmitProfile = (event) => {
let formData = new FormData();
formData.append('img',this.state.img);
formData.append('title',this.state.title);
formData.append('content',this.state.content);
fetch('http://127.0.0.1:8000/post_profile/', {
method: 'post',
headers: {
Accept: 'application/json, text/plain, */*'
},
body:formData,
})
.then(response => response.json())
.then(res => {
if (res.code === 200){
this.componentDidMount()
this.resetForm()
this.closeModal()
}
console.log(res);
})
}
elasticSearch = (event) => {
fetch('http://127.0.0.1:8000/search/', {
method: 'post',
headers:{'Content-Type': 'application/json'},
body: JSON.stringify({
q: event.target.value
})
})
.then(response => response.json())
.then(res => {
console.log(res)
this.setState({ data: res })
});
}
render(){
return (
<div className="api-body">
<section>
<div className="tc pa2">
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Post"
onClick={() => this.openModal()}
/>
<input
className="db ma3 q center border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="q"
id="q"
onChange = {this.elasticSearch}
/>
</div>
<Modal
visible={this.state.visible}
width="400"
height="300"
effect="fadeInDown"
onClickAway={() => this.closeModal()}
>
<div className="mv3 pa3">
<label className="db fw6 lh-copy f6" htmlFor="password">Title</label>
<input
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="title"
id="title"
onChange={this.onTitleChange}
/>
</div>
<div className="mv3 pa3 mt-1">
<label htmlFor="comment" className="f6 b db mb2">Contents </label>
<textarea
id="content"
name="content"
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
aria-describedby="content-desc"
onChange={this.onContentChange}>
</textarea>
</div>
<div className="mv3 pa3 mt-1">
<input
type="file"
multiple = {false}
id="img"
name="img"
ref={(input) => { this.inpuElement = input; }}
accept=".jpg,.jpeg,.png,.pdf,.doc"
onChange={this.OnFileChange}
/>
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Submit"
onClick={this.SubmitProfile}
/>
</div>
</Modal>
</section>
<ProfileCard
data={this.state.data}
pages={this.state.pages}
page={this.state.page}
/>
</div>
)
}
}
export default Api;
child component:
import React from 'react';
class ProfileCard extends React.Component {
constructor(props){
super(props)
this.state = {
data : []
}
}
deleteProfile = id => e => {
fetch('http://127.0.0.1:8000/delete_profile/', {
method: 'post',
headers:{'Content-Type': 'application/json'},
body: JSON.stringify({
id: id
})
})
.then(response => response.json())
.then(res => {
if (res.code === 200){
this.componentDidMount()
}
console.log(res)
})
}
demoMethod(page){
this.props.page(page)
console.log(page)
}
render(){
return (
<div>
{
this.props.data.map((user,i) => {
return (
<article className='mw5 tc bg-white dib br3 pa3 ma3 pa4-ns mv3 ba b--black-10 shadow-5 pc-scroll pointer' key={i}>
<div className="tc">
<img
src={"http://127.0.0.1:8000" + user.photo}
className="br-100 h3 w3 dib"
alt="profile pic"
onDoubleClick = {this.deleteProfile(user.id)}
/>
<h1 className="f4">{user.title}</h1>
<hr className="mw3 bb bw1 b--black-10" />
</div>
<p className="lh-copy measure center f6 black-70">
{user.content}
</p>
</article>
);
})
}
<div className="pagination">
<center>
{[...Array(this.props.pages+1)].map((x, i) =>
<h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
)}
</center>
</div>
</div>
);
}
}
export default ProfileCard;
I wants to send data from child to parent component. in child component i have one demoMethod() from that method i wants to send page data to parent component constructor(state).
This way it is not working. And showing this.props.page(page) is not a function
Please have a look into this.
page in parent is not a function but a number variable defined in constructor state so define a new method in Api component and pass down the method to ProfileCard component as prop and in ProfileCard component demoMethod call this.props.getPage(page);
This is so called callbacks in react. To get child data in parent component a function is the only callback that sends data from child to parent
Parent component
import React from 'react';
import './Api.scss';
import ProfileCard from 'components/Card/ProfileCard.jsx';
import Modal from 'react-awesome-modal';
// import Search from 'components/Search/Search';
class Api extends React.Component {
constructor(props) {
super(props);
this.state = {
title : '',
content: '',
img: '',
data: [],
pages: 0,
page:0
}
}
OnFileChange = (event) => {
this.setState({img: event.target.files[0]});
}
onTitleChange = (event) => {
this.setState({title: event.target.value})
}
onContentChange = (event) => {
this.setState({content: event.target.value})
}
resetForm = () => {
document.getElementById('title').value = '';
document.getElementById('content').value = '';
document.getElementById('img').value = '';
}
openModal() {
this.setState({
visible : true
});
}
closeModal() {
this.setState({
visible : false
});
}
componentDidMount() {
fetch(`http://127.0.0.1:8000/get_profile/?page=${this.state.page}`)
.then(response => response.json())
.then(res =>{
this.setState({ data: res });
this.setState({ pages: res[res.length-1].pages });
console.log(this.state.page)
});
}
SubmitProfile = (event) => {
let formData = new FormData();
formData.append('img',this.state.img);
formData.append('title',this.state.title);
formData.append('content',this.state.content);
fetch('http://127.0.0.1:8000/post_profile/', {
method: 'post',
headers: {
Accept: 'application/json, text/plain, */*'
},
body:formData,
})
.then(response => response.json())
.then(res => {
if (res.code === 200){
this.componentDidMount()
this.resetForm()
this.closeModal()
}
console.log(res);
})
}
elasticSearch = (event) => {
fetch('http://127.0.0.1:8000/search/', {
method: 'post',
headers:{'Content-Type': 'application/json'},
body: JSON.stringify({
q: event.target.value
})
})
.then(response => response.json())
.then(res => {
console.log(res)
this.setState({ data: res })
});
}
getPage = page => {
console.log("page from child component:", page);
}
render(){
return (
<div className="api-body">
<section>
<div className="tc pa2">
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Post"
onClick={() => this.openModal()}
/>
<input
className="db ma3 q center border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="q"
id="q"
onChange = {this.elasticSearch}
/>
</div>
<Modal
visible={this.state.visible}
width="400"
height="300"
effect="fadeInDown"
onClickAway={() => this.closeModal()}
>
<div className="mv3 pa3">
<label className="db fw6 lh-copy f6" htmlFor="password">Title</label>
<input
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="title"
id="title"
onChange={this.onTitleChange}
/>
</div>
<div className="mv3 pa3 mt-1">
<label htmlFor="comment" className="f6 b db mb2">Contents </label>
<textarea
id="content"
name="content"
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
aria-describedby="content-desc"
onChange={this.onContentChange}>
</textarea>
</div>
<div className="mv3 pa3 mt-1">
<input
type="file"
multiple = {false}
id="img"
name="img"
ref={(input) => { this.inpuElement = input; }}
accept=".jpg,.jpeg,.png,.pdf,.doc"
onChange={this.OnFileChange}
/>
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Submit"
onClick={this.SubmitProfile}
/>
</div>
</Modal>
</section>
<ProfileCard
data={this.state.data}
pages={this.state.pages}
page={this.state.page}
getPage={this.getPage}
/>
</div>
)
}
}
export default Api;
Child Component
import React from 'react';
class ProfileCard extends React.Component {
constructor(props){
super(props)
this.state = {
data : []
}
}
deleteProfile = id => e => {
fetch('http://127.0.0.1:8000/delete_profile/', {
method: 'post',
headers:{'Content-Type': 'application/json'},
body: JSON.stringify({
id: id
})
})
.then(response => response.json())
.then(res => {
if (res.code === 200){
this.componentDidMount()
}
console.log(res)
})
}
demoMethod(page){
this.props.getPage(page)
console.log(page)
}
render(){
return (
<div>
{
this.props.data.map((user,i) => {
return (
<article className='mw5 tc bg-white dib br3 pa3 ma3 pa4-ns mv3 ba b--black-10 shadow-5 pc-scroll pointer' key={i}>
<div className="tc">
<img
src={"http://127.0.0.1:8000" + user.photo}
className="br-100 h3 w3 dib"
alt="profile pic"
onDoubleClick = {this.deleteProfile(user.id)}
/>
<h1 className="f4">{user.title}</h1>
<hr className="mw3 bb bw1 b--black-10" />
</div>
<p className="lh-copy measure center f6 black-70">
{user.content}
</p>
</article>
);
})
}
<div className="pagination">
<center>
{[...Array(this.props.pages+1)].map((x, i) =>
<h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
)}
</center>
</div>
</div>
);
}
}
export default ProfileCard;
Passing Data Between React Components, This is the easiest direction of data flow in React and the most basic one. class Parent extends React.Component {state = { data : "Hello World" } and in the child component you can do: <Text>{this.props.stuff}</Text>//place stuff by any property name in props Now if you want to update the state of parent component from the child component you will need to pass a function to the child component:
You are not passing page prop as function, it should be a function instead of variable, page is number in state. You should send:
someFunction = () => {
console.log('function passed from parent')
}
// in render function
<ProfileCard
data={this.state.data}
pages={this.state.pages}
page={this.someFunction}
/>
React JS Tutorial 10: Passing data from child to parent components , components/Area'; import Parameter from './components/Parameter'; class App extends Component { constructor(props) { super(props) this.state = { data: 0, len: //It is no compulsion to use the data to send as a state, simple vars or const variables could also be used to send data from Parent to Child. Simply, use this.props.dataFromParent (just a variable used for sending props) to access the data sent from Parent to Child. class Child2 extends React.Component {
In this case, your data should reside in parent components state and you should be passing a handler down to child component has props and use that handler to update the state in parent component.
Passing Data Between React Components - Ruth M. Pardee, This is the easiest direction in React to transfer data. If I have access to data in my parent component that I need my child component to have access to, I can pass it as a prop to the child when I instantiate it Child to Parent — Use a callback and states How to handle Routing and Navigation in React JS. React hooks are introduced in React 16.8. If you are familiar with the class components then there is no difference to change the parent component state from child component. In both cases, you have to pass the callback function to the parent. Let’s take a very simple example to understand it. We will take two components, Parent and Child.
Add a call Back function to your parent component - See below constructor
class Api extends React.Component {
constructor(props) {
super(props);
this.state = {
title : '',
content: '',
img: '',
data: [],
pages: 0,
page:0
}
}
**##Add callback function**
myCallbackfunc(val){
this.setState({page:val)}
}
OnFileChange = (event) => {
this.setState({img: event.target.files[0]});
}
onTitleChange = (event) => {
this.setState({title: event.target.value})
}
onContentChange = (event) => {
this.setState({content: event.target.value})
}
resetForm = () => {
document.getElementById('title').value = '';
document.getElementById('content').value = '';
document.getElementById('img').value = '';
}
openModal() {
this.setState({
visible : true
});
}
closeModal() {
this.setState({
visible : false
});
}
componentDidMount() {
fetch(`http://127.0.0.1:8000/get_profile/?page=${this.state.page}`)
.then(response => response.json())
.then(res =>{
this.setState({ data: res });
this.setState({ pages: res[res.length-1].pages });
console.log(this.state.page)
});
}
SubmitProfile = (event) => {
let formData = new FormData();
formData.append('img',this.state.img);
formData.append('title',this.state.title);
formData.append('content',this.state.content);
fetch('http://127.0.0.1:8000/post_profile/', {
method: 'post',
headers: {
Accept: 'application/json, text/plain, */*'
},
body:formData,
})
.then(response => response.json())
.then(res => {
if (res.code === 200){
this.componentDidMount()
this.resetForm()
this.closeModal()
}
console.log(res);
})
}
elasticSearch = (event) => {
fetch('http://127.0.0.1:8000/search/', {
method: 'post',
headers:{'Content-Type': 'application/json'},
body: JSON.stringify({
q: event.target.value
})
})
.then(response => response.json())
.then(res => {
console.log(res)
this.setState({ data: res })
});
}
render(){
return (
<div className="api-body">
<section>
<div className="tc pa2">
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Post"
onClick={() => this.openModal()}
/>
<input
className="db ma3 q center border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="q"
id="q"
onChange = {this.elasticSearch}
/>
</div>
<Modal
visible={this.state.visible}
width="400"
height="300"
effect="fadeInDown"
onClickAway={() => this.closeModal()}
>
<div className="mv3 pa3">
<label className="db fw6 lh-copy f6" htmlFor="password">Title</label>
<input
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
type="text"
name="title"
id="title"
onChange={this.onTitleChange}
/>
</div>
<div className="mv3 pa3 mt-1">
<label htmlFor="comment" className="f6 b db mb2">Contents </label>
<textarea
id="content"
name="content"
className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"
aria-describedby="content-desc"
onChange={this.onContentChange}>
</textarea>
</div>
<div className="mv3 pa3 mt-1">
<input
type="file"
multiple = {false}
id="img"
name="img"
ref={(input) => { this.inpuElement = input; }}
accept=".jpg,.jpeg,.png,.pdf,.doc"
onChange={this.OnFileChange}
/>
<input
type="button"
className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
value="Submit"
onClick={this.SubmitProfile}
/>
</div>
</Modal>
</section>
<ProfileCard
data={this.state.data}
pages={this.state.pages}
page={this.state.page}
#Pass the call back function as a prop to the child component
mycallbackfunc = {this.myCallbackfunc)
/>
</div>
)
}
}
export default Api;
To your child component, in the demoMethod function add this line
demoMethod(page){
Change the below line
this.props.myCallbackfunc(page)
console.log(page)
}
How to pass data from Child component to Parent component in , After that create a function in parent to handle value which coming from Child component and store it into the state variable of the parent DTServicesCalculator is the parent-component is this example. It’s also a child. Let’s look. DTServiceCalculator creates a list of child-component (ServiceItems) and provides them with props . It’s the parent-component of ServiceItem but it`s the child-component of the component passing it the list. It doesn't own the data.
How to Pass Props Object from Child Component to Parent , When learning ReactJS, we often hear the term props. 1 2 3 4 5 6 7 8 9 10 11 12 import React, { Component } from 'react'; The next question we may have is how to pass some data as parameters from one React component to the Also, state can be passed down as props to any child component. If I have a grandparent, a child component, and a grandchild component, can the grandparent request the state of the child? I've tried using "request" like here but the types don't match up when you're requesting the state of a child that also has a child of its own. The example in the guide works fine when I'm requesting the state of a child
How to Pass a JSON Object from Child Component to Parent , Passing data between components is a crucial task for communication between components in React. State and props are the most widely In the ReactJS project, you are having aa parent component and a child component. Let’s assume, we have a Movie and MovieList component. MovieList is a parent component and is maintaining the list of movies. I want to have the add/remove method in this component. So, this is the correct place to have the remove method.
Passing Data from Child to Parent with React Hooks, There must be a way to pass user information up the component tree so that can update the information stored in the [user] state. Passing Data Sending data back to the parent, to do this we simply pass a function as a prop from the parent component to the child component, and the child component calls that function. In this example, we will change the Parent state by passing a function to the Child component and invoking that function inside the Child component.
Comments
- Possible duplicate of stackoverflow.com/questions/38394015/…
- No bro. its different. please check question again.
- Yes. there is no requirements to send it in function . so is there any way??
- If you want to send data from child to parent, way is to pass function as prop to child and then pass data as argument to that function.
- could you please write it