Getting "Unreachable code no-unreachable" in ReactJS

Question

I am new to create GET requests in React. I am trying to fetch media_id from Instagram Content when someone enters the url in the input field. The interesting thing is I do get response in Inspector for the following GET request but I am not sure how to properly execute this.

Following is my Component Code.

import React, { Component } from 'react';


export default class UrlInput extends Component {

  constructor(props){
    super(props);

    this.state = {
      term: '',
      mediaid: ''
    };
    this.onInputChange = this.onInputChange.bind(this);
  }
  componentDidMount(){
    const url = 'https://api.instagram.com/oembed/?url=http://instagram.com/p/Y7GF-5vftL/';
    fetch(url).then(response => {
        if(response.ok){
          return response.json();
        }
        throw new Error('Request failed!');
      },
      networkError => console.log(networkError.message)).then(jsonResponse => {
        return jsonResponse;
        console.log(jsonResponse);
      });
    }

  render(){
    return (
      <div className='search-bar'>
          <input
            value= {this.state.term}
            onChange={ event => this.onInputChange(event.target.value)} />

          <div>{this.state.term}</div>
      </div>
    );
  }
  onInputChange(term){
    this.setState({term});
  }
}

Answer 1

no-unreachable is just a warning that tells you that you have unreachable code in your code. In this case, it is the console.log(jsonResponse) after return jsonResponse

It is unreachable because when the code find a return statement, it will just break out of the function and not continue any further, thus the console.log(jsonResponse) will never be called.

Answer 2

Remove console.log() after the return value

Answer 3

I faced the same problem. Seems it is because the parenthesis of return should be inline like return ( and not like

return

(

This solved problem for me