how to send data from child component to parent component state in reactjs

pass state from child to parent react hooks
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