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)

Actually, it works with this static data but probably your routing is not right as its current state. What is your intention here? How is your whole App structure? — devserkan
– devserkan, Commented Sep 2, 2018 at 23:42
@devserkan btw I think he has overloaded constructor of Diagnosis class like he did with App and forgot to pass props :D. Cause he don't share with us overall Diagnosis component. So we're just guessing why it's not working with static data — num8er
– num8er, Commented Sep 2, 2018 at 23:58
Might be, since we don't see the rest of Diagnosis component here. @ÇağataySert, can we see it if possible? — devserkan
– devserkan, Commented Sep 2, 2018 at 23:59
you've got cyclic dependencies (probably App is undefined) — marzelin
– marzelin, Commented Sep 3, 2018 at 0:21

devserkan · Accepted Answer · 2018-09-03 00:46:44Z

2

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 => { ....

edited Sep 3, 2018 at 0:46

answered Sep 2, 2018 at 23:51

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Çağatay Sert Over a year ago

Thank you for your consideration. When I click any button , my app crushes and I do not take any error. Probably , I made mistake which is related routing because without changing route, map function and app is working.

devserkan Over a year ago

You are welcome. By saying "changing route" you mean fixing it like I did or going another path? Can you put your app to codesandbox.io or you can update your question again with the whole app.

Çağatay Sert Over a year ago

Thank you very much for your help. I tried ur codes and now it works.. :)

devserkan Over a year ago

You are welcome again but still, this solution might be problematic. I still don't understand the app structure very well but /diagnosis path might be the problem here. It might cause a loop. So, try to examine React Router a little bit :)

Çağatay Sert Over a year ago

Okay , I will give attention to your suggestion. :))

marzelin · Accepted Answer · 2018-09-03 00:11:28Z

0

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>

edited Sep 3, 2018 at 0:11

answered Sep 3, 2018 at 0:06

marzelin

11.7k5 gold badges38 silver badges50 bronze badges

1 Comment

Çağatay Sert Over a year ago

Thank you for your answer : ) I got an error about the last '}' when I change my code.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related