Состояние, переданное через контекст, не определено

Я пытаюсь заставить мой контекст работать правильно. Я добавил его, и он работает так, как должен, если я передаю строку как свойство в состояние. Однако я хочу передать реквизит как состояние.

Итак, это работает:

export class DataProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      continent: props.continent,
    };
    this.updateState = this.updateState.bind(this);
  }

  updateState() {
    this.setState({ continent: this.props.continent});
  }

  componentDidMount() {
    console.log(this.props.continent);
    this.updateState();
  }

  render() {
    return (
      <DataContext.Provider value={{ state: this.state }}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

Но это не работает (результат undefined)

  this.state = {
      continent: this.props.continent,
    };

При попытке доступа к нему получается «неопределенное».

Я получаю поддержку от компонента с именем «Африка», который делает следующее:

const Africa = ({}) => {
  return (
    <div>
       <DataProvider continent={["Africa"]} /> 
........irrelevant code

Он успешно переходит к моему компоненту DataProvider. Но, как я уже сказал, когда я пытаюсь передать это как свойство для своего состояния, это приводит к «неопределенному».

class JumbotronPage extends Component {
  static contextType = DataContext;

  render() {
    console.log(this.context)

A (DataProvider), B (Африка), C ​​(JumbotronPage) Я не уверен, что это потому, что A и B узнают друг друга. В и С нет.

Поэтому всякий раз, когда я обращаюсь к C из A, B повторно отображается, в результате чего C ничего не дает в качестве состояния. Имеет ли это смысл?

Пожалуйста, простите меня за то, что я очень зеленый и новичок в React. Я надеюсь, что я имею какой-то смысл.

Это часть моего App.js:

<Router>
        <div className="App">
          <MainNav />
          <Switch>
            <Route exact path="/" component={JumbotronPageHome} />
            <Route exact path="/Europe" component={Europe} />
            <Route exact path="/SouthAmerica" component={SouthAmerica} />
            <Route exact path="/NorthAmerica" component={NorthAmerica} />
            <Route exact path="/Africa" component={Africa} />
            <Route exact path="/Oceania" component={Oceania} />
            <Route exact path="/Asia" component={Asia} />
            <Route exact path="/Memories" component={Memories} />
            <Route exact path="/Login" component={Login} />
            <Route exact path="/Jumbotron">
              <DataProvider>
                <JumbotronPage />
              </DataProvider>
            </Route>
            <Route exact path="/CreateNewMemories" component={renderForm} />
          </Switch>
        </div>
      </Router>

Я создал суть, если у кого-то есть время терпения, чтобы посмотреть на мою мерзость.

https://gist.github.com/kalleftw/e79412034eafd29a2e26b1af24149e67

Благодарность

Изменить: нужно ли мне вообще устанавливать состояние? Состояние, которое передается через контекст, должно быть установлено в соответствии с реквизитами получения.

Редактировать 2: Я ДУМАЮ, потому что A (Context) получает реквизиты от C (Continent). Однако при рендеринге B(Jumbotron) он никогда не получает реквизиты из C.

Смотрите изображение: https://imgur.com/a/tKODdUY

Любая идея, если это может быть так?

Обновлять: Уточнение: Итак, если я получу доступ к моему компоненту "Африка": https://imgur.com/4LSPwS6, я бы хотел загрузить каждую страну из моей базы данных с континентом "Африка"

Когда я нажимаю «Африка», я хочу увидеть все страны, которые в настоящее время находятся в базе данных, связанные с Африкой: https://imgur.com /v1dGE9J

Когда я нажимаю на страну, я хочу отобразить информацию из базы данных в jumbotron: https://imgur.com/eoftLW0

Данные, которые я хотел бы просмотреть: https://imgur.com/Vt9IEr0