React pass parent state into child props

I’m using react router in my application and for a specific route path, I wanted to pass in the state of parents to the props of child. I suspect that something async is going on because in line 85, the console log printed out, but in line 86 it says is undefined. Here is the code:

import React, { Component } from 'react';
import { BrowserRouter } from "react-router-dom";
import { Route, Switch, Redirect } from "react-router-dom";
import './App.css';
import {allrecipe} from "./recipes.js";
import {About} from "./About.js"
import {Recipe} from "./Recipe.js"

function importAll(r) {
  return r.keys().map(r);

const images = importAll(require.context('./image', false, /\.(png|jpe?g|svg)$/));

const Header = () => (
  <div className="header">
    <span className="header-title"> The Omnivore's plate </span>
    <a href="/about" className="header-span"> About me</a>
    <a href="/" className="header-span"> Recipes</a>

class List extends React.Component {
  constructor(props) {
    this.props = props.obj;
    //this.state = {currentRecipe: props.obj.wid};
    if (this.props.state !== "home") {
      return <Redirect to={this.props.state} />
      <ul className="list">
        { =>
        <li className="gridwrapper" id={prop.wid} onClick={()=> this.props.action(prop.wid)}>
          <div className="grid">
            <div className="flex-column" >
              <div className="photo-wrapper">
                <img src={images[prop.index]} width="200" height="250"></img>
              <div className="name-wrapper">
              <div className="flex-row">
                <div className="time-wrapper">
                  <p className="content">Total time: {prop.total_time}</p>
                <div className="serving-wrapper">
                  <p className="content">Serving: {prop.serving}</p>
        </li> )}

class App extends Component {
  constructor(props) {
    this.pageSwitch = this.pageSwitch.bind(this);
    this.state = {
      page: "home"

  pageSwitch(newState) {
      page: newState

  render() {
    return (
            <Route exact path="/" render={()=><List obj={allrecipe} action={this.pageSwitch} state={}/>} />
            <Route path="/about" component={About} />
            <Route path="/:recipe" render={function(){Recipe(}} />


export default App;


Edit: Actually I just solved it. Never mind !