In this lesson you will be shown the steps on how to pass data from child component to parent component.

In this instance the parent component is the top component that holds the Routes that contains the child components 

In the parent component, create a callback method:

loadStatus = (val) => {
  this.setState({pgeLoader:val});
}

The callback method will retrieve the data from the child component.

Pass the callback method to the child as a prop from the parent component:

<Route path="/about" render={props => <About {...props} isLoad={this.loadStatus} />} />

Call the callback method from the child component. In this case the method is called from componentDidMount:

componentDidMount() {
   this.props.isLoad(this.state.page);
}

The data is passed as a param to the callback method.

If you switch from component to component the parent component will render after the pgeLoader state is set within the callback method. You can check by doing a console log on the pgeLoader state.

Here is the full parent component:

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import 'bootstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js"

import About from "./components/About";
import Contact from "./components/Contact";
import Blog from "./components/Blog";

import logo from './logo.svg';
import './App.css';
import Home from "./components/Home";

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      pgeLoader: "",
    };
  }

  loadStatus = (val) => {
    this.setState({pgeLoader:val});
  }

  render() {
    return (
        <Router>
          <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light bg-light">
              <a className="navbar-brand" href="https://wecode101.com/" rel="noopener noreferrer" target="_blank">
                <img src={logo} width="30" height="30" alt="wecode101.com/" />
              </a>
              <Link to="/" className="navbar-brand">Home</Link> {/*Clickable links related to the Router*/}
              <div className="collpase navbar-collapse">
                <ul className="navbar-nav mr-auto">
                  <li className="navbar-item">
                    <Link to="/about" className="nav-link">About</Link>
                  </li>
                  <li className="navbar-item">
                    <Link to="/contact" className="nav-link">Contact</Link>
                  </li>
                  <li className="navbar-item">
                    <Link to="/blog" className="nav-link">Blog</Link>
                  </li>
                </ul>
              </div>
            </nav>
            <br/>
            <Route exact path="/" render={props => <Home {...props} isLoad={this.loadStatus} />} />
            <Route path="/about" render={props => <About {...props} isLoad={this.loadStatus} />} />{/*The Router enables the navigation among views of various components*/}
            <Route path="/contact" render={props => <Contact {...props} isLoad={this.loadStatus} />} />
            <Route path="/blog" render={props => <Blog {...props} isLoad={this.loadStatus} />} />
          </div>
        </Router>
    );
  }
}

export default App;

Here is one of the full child component:

import React, { Component } from 'react';

export default class About extends Component {
    constructor(props) {
        super(props);
        this.state = {
            page: "About page",
        };
    }

    componentDidMount() {
        this.props.isLoad(this.state.page);
    }

    render() {

        return (
            <div className="mt-5 text-center">
                {this.state.page}
            </div>
        )
    }
}