App.js - The parent component

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

import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';
import Context from './Context';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        messageThatllChange: "changing message",
    };
  }

  render() {
    return (
        <Router>
            <Switch>
                <Context.Provider value={this.state.messageThatllChange}>
                    <Route exact path='/' component={ChildComponent1} />
                    <Route path='/chat' component={ChildComponent2} />
                </Context.Provider>
            </Switch>
        </Router>
    );
  }
}

export default App;

```

ChildComponent1.js - child component

```
import React from 'react';
import Context from './Context';

class Join extends React.Component {
    static contextType = Context;

    constructor(props) {
        super(props);
        console.log(this.context); // this.context returns undefined.
    }

    render() {
        return (
            <div>
                {/* Something important here */}
            </div>
        );
    }
}

// Join.contextType = Context; // tried this too
export default Join;

```

In the child component 1 constructor trying to print this.context returns `undefined`.

How do I pass the context from parent to children? What am I doing wrong?