I'm learning React.js through videos on Udemy and I'm stuck at sending a property when calling a component. I don't see anything wrong in my code as the instructor in the video has the same code and it works for him. I'm calling the component from a `react-router-dom` JS file.

`Router.js`

```
import React, {Component} from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import SeccionPruebas from './components/SeccionPruebas';
import MiComponente from './components/SeccionPruebas';
import Peliculas from './components/Peliculas'
import Error from './components/Error';

class Router extends Component {
    render() {
        return (            
            <BrowserRouter>
                {/* CONFIGURAR RUTAS Y PÁGINAS */}
                <Switch>
                    <Route exact path="/" component={Peliculas}/>
                    <Route exact path="/ruta-prueba" component={SeccionPruebas}/>
                    <Route exact path="/segunda-ruta" component={MiComponente}/>

                    <Route exact path="/pagina-1" render= {() => (
                        <React.Fragment>
                            <h1>Hola mundo desde la ruta PAGINA 1</h1>
                            <MiComponente saludo="Hola amigo" /> /* I want to send `saludo` property to `MiComponente` component.*/
                        </React.Fragment>
                    )}/>

                    <Route component={Error}/>
                </Switch>
            </BrowserRouter>
        );
    }
}

export default Router;

```

`MiComponente.js`

```
import React, {Component} from 'react';

class MiComponente extends Component {
    render(){
        let receta = {
            nombre: 'Pizza',
            ingredientes: ['Tomate', 'Queso', 'Jamón cocido'],
            calorias: 400
        };

        return (
            <React.Fragment>
                <h1>{'Receta: ' + receta.nombre}</h1>
                <h2>{'Calorias: ' + receta.calorias}</h2>

                {console.log(this.props.saludo)} /* I want to print the content of `saludo` property which should be `Hola amigo`.*/

                <ol>
                    {
                        receta.ingredientes.map((ingrediente, i) => {
                            return (
                                <li key={i}>
                                    {ingrediente}
                                </li>
                            );
                        })
                    }
                </ol>
                <hr/>
            </React.Fragment>            
        );
    }
}

export default MiComponente;

```

The result is `undefined`

[![enter image description here](https://i.stack.imgur.com/Zgpod.png)](https://i.stack.imgur.com/Zgpod.png)

If I just try to print `this.props`, I get an empty array:

[![enter image description here](https://i.stack.imgur.com/T7l13.png)](https://i.stack.imgur.com/T7l13.png)

And sorry for the Spanish, but I'm watching these videos in my native language.

What do I have wrong in the code?