Warning: Unreachable code , using Reactjs

Question

I am using ReactJs. I have two Components,PrescriptionIndex and PrescriptionNew, integrating one with another.

This is my first component \'PrescriptionNew\'

Answer 1

Your code is currently

if (X)
  return A
else
  return B
return C

Of course C is unreachable here. I think you meant to drop the else case (B) where you currently are returning null, and return C instead of it.

if (this.props.prescriptions.prescriptions !== undefined) {
  return this.props.prescriptions.prescriptions.map(function(data){
    return (
      <div className="image-prescription" key={data.id}>
        <Link to={"/update/" + data.id} >
          <img src={data.image_path.image_path.url} 
            className="prescription-image"
            alt="prescription" 
          />
        </Link>  
      </div>      
    );
  });
} else {
  // return null; <== remove this
  return (
    <div>
      <PrescriptionNew />
    </div>
  )
}

Answer 2

The reason is pretty straight forwards, you have an if-else and you are returning from both of them so the last part of your code is unreachable

you might want this

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(<p> Fetching an Api results in error</p>)
    }

    if (this.props.has_loading){
      return(<p> Loading...</p>)
    }
    return(
      <div>
        <PrescriptionNew /> 
        {this.props.prescriptions.prescriptions && this.props.prescriptions.prescriptions.map(function(data){
        return (
          <div className="image-prescription" key={data.id}>
            <Link to={"/update/" + data.id} >
              <img src={data.image_path.image_path.url} 
                className="prescription-image"
                alt="prescription" 
              />
            </Link>  
          </div>      
        );
      }); }
      </div>
    )
  }
}
export default PrescriptionIndex;