Q:

ReactJS - I can't pass prop trought Route for a child component

I have this Component that passes a prop for a Child Component:
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'    
import PortfolioPage from './PortfolioPage'  

class PortfolioMenu extends Component {
  constructor(props) {
    super(props)
    // here is the prop to be passed for a child component
    this.state = {       
      interiorsUrl: "http://localhost:3001/interiors"
    }
  }

  render() {    
    return (
      <div>
        <Router>
          <div class="wrapper2">
            <div class="wrapper-portfolio">
              // here is the line to pass the prop
              <Route exact path='/portfolio/interiores' render={() => <PortfolioPage interiorsUrl={this.state.interiorsUrl}/>} />
            <nav>
              <ul>   
                <li><NavLink activeClassName="active" exact to="/portfolio/interiores">• interiores</NavLink></li>                  
              </ul>
            </nav>
          </div>
        </Router>
      </div>
    )
  }
}

export default PortfolioMenu

Here is the Child Component who receives the props:
import React, { Component } from 'react'
import axios from 'axios'
import Modal from 'react-responsive-modal';
import Lightbox from 'react-lightbox-component';

const URL = this.props.interiorsUrl;

class PortfolioPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: []
    }

  }

  componentDidMount() {
    axios.get(URL)

//...rest of the code omitted

In the Component above, there is an error's message on the console:

TypeError: Cannot read property 'interiorsUrl' of undefined

It is pointed to this code line:
 const URL = this.props.interiorsUrl;

What did I wrong? Thank you.

A:

You need to call this.props.interiorsUrl from inside your component.
So anywhere instead the { } after class
eg: 
componentDidMount() {
    axios.get(this.props.interiorsUrl)
}

