title: Warning: Unreachable code , using Reactjs
body: <p>I am using ReactJs. I have two Components,PrescriptionIndex and PrescriptionNew, integrating one with another.</p>
  
  <p>This is my first component 'PrescriptionNew'</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import ContentAdd from 'material-ui/svg-icons/content/add';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
  
  class PrescriptionNew extends Component {
  
    render(){
      return(
        &lt;div&gt;
          &lt;MuiThemeProvider&gt;
            &lt;FloatingActionButton mini={true} style={{"color": "pink"}}&gt;
              &lt;ContentAdd/&gt;
            &lt;/FloatingActionButton&gt;
          &lt;/MuiThemeProvider&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default PrescriptionNew;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my another Component "PrescriptionIndex"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React , { Component } from 'react';
  import { connect } from "react-redux";
  import { fetchPrescriptionFromUrl } from '../actions/index.js';
  import { Link } from 'react-router';
  import PrescriptionNew from './new.jsx';
  import '../app.css';
  
  class PrescriptionIndex extends Component {
  
    componentDidMount(){
      this.props.fetchData(PORT+'/prescriptions');
    }
  
    render() {
      if (this.props.has_error){
        return(&lt;p&gt; Fetching an Api results in error&lt;/p&gt;)
      }
  
      if (this.props.has_loading){
        return(&lt;p&gt; Loading...&lt;/p&gt;)
      }
      if (this.props.prescriptions.prescriptions !== undefined) {
        return this.props.prescriptions.prescriptions.map(function(data){
          return (
            &lt;div className="image-prescription" key={data.id}&gt;
              &lt;Link to={"/update/" + data.id} &gt;
                &lt;img src={data.image_path.image_path.url} 
                  className="prescription-image"
                  alt="prescription" 
                /&gt;
              &lt;/Link&gt;  
            &lt;/div&gt;      
          );
        });
      } else {
        return null;
      }
      return(
        &lt;div&gt;
          &lt;PrescriptionNew /&gt; //this is where I need my another component
        &lt;/div&gt;
      )
    }
  }
  export default PrescriptionIndex;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On Running, the "PrescriptionNew" component is not visible. On examing the console, warning is stated as " Unreachable code". I have gone through other <a href="https://stackoverflow.com/questions/37049456/reactjs-unreachable-code-after-return-statement">solutions</a>, but I cannot able to study whats going wrong in my code.</p>