Map function error: Cannot read property 'map' of undefined in Reactjs

Question

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import endoskopi from '../Images/endoskopi.jpg';
import '../Css/diagnosis.css'
import {Route,Switch,BrowserRouter,Link} from 'react-router-dom'
import ChosenDiagnosis from "./ChosenDiagnosis";
import App from "./App";


class Diagnosis extends Component {
  constructor(props) {
    super(props);
}


static propTypes = {
    diagnosis: PropTypes.array
};


render() {
    return (
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path='/diagnosis' component={App}/>
                    <Route path='/diagnosis/:id' component={ChosenDiagnosis}/>
                </Switch>

                <div className="row">
                    {( this.props.diagnosis || [] ).map(diagnosis =>{
                        return (<div key={diagnosis.id} className="col-md-4" style={{marginTop:"2rem"}}>
                            <div className="diagnosis-box">
                                <img className="diagnosis-img" src={endoskopi} alt={diagnosis.name}/>
                                <div className="diagnosis-text">{diagnosis.name}</div>
                                <Link to={`/diagnosis/${diagnosis.id}`}>
                                    <button className={"diagnosis-button"}>Ücreti Sorgula</button>
                                </Link>
                            </div>
                        </div>)
                    })}
                </div>
            </div>
        </BrowserRouter>

    );
  }
}

export default Diagnosis;

Hello , I am a newbie at Reactjs. I got this error but I do not understand the reason because my 'diagnosis' array has been declared in app.js . Also, I put 'Switch' block to under the all codes but it did not work. May you help me please?

Thank you in advance.

class App extends Component {
constructor(props) {
    super(props);
}

state={
  diagnosis: [
      {
          name: "EKG",
          id: 1
      },
      {
          name: "Ultrason",
          id: 2
      },
      {
          name: "MR",
          id: 3
      },
      {
          name: "Röntgen",
          id: 4
      },
      {
          name: "EEG",
          id: 5
      },
      {
          name: "EMG",
          id: 6
      },
      {
          name: "Kan Testi",
          id: 7
      },
      {
          name: "İdrar Testi",
          id: 8
      },
      {
          name: "Tomografi",
          id: 9
      },
      {
          name: "Endoskopi",
          id: 10
      },
  ]
};


render() {
return (
  <div className="App">
    <Navbar/>
    <Diagnosis diagnosis={this.state.diagnosis}/>
  </div>
);

} }

export default App;

It's also my another component which is App.js. (Edited by request)

Answer 1

With this static data, your code should work actually. You don't have to use any conditional rendering here. But the error in your question indicates that when your component renders the first time there isn't any diagnosis prop at that time. We should examine this.

One other problem is in your route definition. Probably you want to do something like that:

<Switch>
    <Route path='/diagnosis' component={Diagnosis}/>
    <Route path='/diagnosis/:id' component={ChosenDiagnosis}/>
</Switch>

Look this part: path='/diagnosis/:id'.

To guarantee let's try this in your code with the fix above:

{( this.props.diagnosis || [] ).map(diagnosis => { ....

Answer 2

try to change this part:

           <Switch>
                <Route path='/diagnosis' component={Diagnosis}/>
                <Route path='/diagnosis:id' component={ChosenDiagnosis}/>
            </Switch>

to:

           <Switch>
                <Route path='/diagnosis' render={() => <Diagnosis diagnosis={this.props.diagnosis}/>}/>
                <Route path='/diagnosis:id' component={ChosenDiagnosis}/>
            </Switch>