Why isn't the state "repos" fetching data from JSON?

Question

I have tried this same code in another component and "repos" was getting the content of languagesdata.json, but when trying this code in the App component I get the error I describe in the title.

ComponentDidMount doesn't work either that is why I use componentWillMount, but "repos" is still null after fetchLanguageRepos.

I have added the result of some console.logs in order to make it clearer. Here's the code of the component:

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Login from './components/Login'
import Dashboard from './components/Dashboard'
import PropTypes from 'prop-types'
import languagesdata from './languagesdata.json'
import { fetchLanguageRepos } from './utils/api'
import {BrowserRouter as Router, Route } from 'react-router-dom'

function LanguagesNav ({ selected, onUpdateLanguage}) {
  const languages = ['EU', 'ES', 'EN']

  return (
    <div >
      <h1 className='center-text header-lg'>
        GAUR 2.0
      </h1>
      <ul className='flex-center'>
        {languages.map((language) => (
          <li key={language}>
            <button
              className='btn-clear nav-link'
              style={language === selected ? { color: 'rgb(187, 46, 31)' } : null }
              onClick={() => onUpdateLanguage(language)}>
              {language}
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

LanguagesNav.propTypes = {
  selected: PropTypes.string.isRequired,
  onUpdateLanguage: PropTypes.func.isRequired
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedLanguage: 'EU',
      repos: null,
      error: null
    }

    this.updateLanguage = this.updateLanguage.bind(this)
  }

  componentWillMount () {
    this.updateLanguage(this.state.selectedLanguage)
  }

  updateLanguage (selectedLanguage) {
    this.setState({
      selectedLanguage,
      error: null
    })

    console.log(selectedLanguage) // ='EU'

    fetchLanguageRepos(selectedLanguage)
      .then((repos) => this.setState({
          repos,
          error: null,
        }),
      console.log(this.state.repos) //=null
    )
      .catch(() => {
        console.warn('Error fetching repos: ', error)

        this.setState({
          error: 'There was an error fetching the repositories.'
        })
      })
    
    console.log(this.state.repos) // =null

  }

  render() {
    const { selectedLanguage, repos, error } = this.state

    console.log(repos) // =null

    return (
      <Router>
        <div className='container'>
          <LanguagesNav
            selected={selectedLanguage}
            onUpdateLanguage={this.updateLanguage}
          />
          <Route
            exact path='/'
            render={(props) => (
              <Login
                repos={repos}
                selectedLanguage={selectedLanguage}
              />
            )}
          />
          <Route
            path='/dashboard'
            render={(props) => (
              <Dashboard
                repos={repos}
                selectedLanguage={selectedLanguage}
              />
            )}
          />
        </div>
      </Router>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Here's the code of fetchLanguageRepos:

api.js

export function fetchLanguageRepos () {
  const endpoint = 'app/languagesdata.json'

  return fetch(endpoint)
    .then((res) => res.json())
    .then((data) => {
      if (!data.languages) {
        throw new Error(data.message)
      }

      return data.languages
    })
}

Does anyone know why is this happening here?