ReactJS - Cannot read property 'map' of undefined and not getting data

1

Hi folks,

I have an issue with this code:


  render() {
    const { disruptions } = this.state;

    disruptions.map(disruption => {
      return (
        <div>
          {disruption.title}
          <br />
          {disruption.mode}
          <br />
          {disruption.title}
        </div>
      );
    });

    return (
      <div>
        <h5>The Disruptions</h5>
      </div>
    );
  }
}

It loads the app but then doesn’t load the data - what am I doing wrong here?
Cheers,
John.

2

You’ve specified that your render function isn’t rendering anything except the div and the title: it’s a function, but you aren’t returning anything except

<div>
  <h5>The Disruptions</h5>
</div>

You map over the state, but you don’t do anything with that. I assume you meant to write something like

render() {
    const { disruptions } = this.state;

    return (
      <div>
        <h5>The Disruptions</h5>
        { disruptions.map(disruption => (
            <div>
              {disruption.title}
              <br />
              {disruption.mode}
              <br />
              {disruption.title}
            </div>
          );
        }
      </div>
    );
  }
1 Like
3

Thanks Dan, so do I need to put that map func into the return? I am lost. Thank you.

4

Thanks again for the help, I see what your saying now, I’ve done this before but my mind has gone blank! So I’ve used what you said and this is my code now:

render() {
    const { disruptions } = this.state;

    return (
      <div>
        <h5>The Disruptions</h5>
        { disruptions.map(disruption => (
            <div>
              {disruption.title}
              <br />
              {disruption.mode}
              <br />
              {disruption.title}
            </div>
          );
        }
      </div>
    );
  }

But it throws this errors:

24
24496×550 32.6 KB

Help please and thank you!

5

Delete ; at line 41 mate. And reformat the curly brace to line 41

1 Like
6

Thank you but now I get this:

24

Literally losing my mind over this today - thank you for the help!

7

08
08662×581 37.6 KB

8

Yes, sorry @john1! I just cut and pasted on my phone without checking if it was completely correct. Look at the parentheses, they need to match: you have an opening one for map but no closing one, that’s why the curly bracket at the end is highlighted red

1 Like
9

Don’t be sorry Dan, I massively appreciate all the help you offer on the forums! I will see what I can do now - cheers!!

1 Like
10 
render() {
    const { disruptions } = this.state;

    return (
      <div>
        <h5>The Disruptions</h5>
        { disruptions.map(disruption => (
            <div>
              {disruption.title}
              <br />
              {disruption.mode}
              <br />
              {disruption.title}
            </div>
          ); // <= Remove semicolon in here
        }
      </div>
    );
  }
1 Like
11

Did that but now:

42
42627×565 38.4 KB

Do I need to format this anymore?
Cheers!

12

Extra parenthesis needed. If I remove the JSX for clarity:

    return (
      <div>
        <h5>The Disruptions</h5>
        { // a
          disruptions.map( // 1
            disruption => ( // 2
               // __JSX HERE__
            ) // close 2
           ) // close 1, ADD THIS
        } // close a
      </div>
    );
  }
1 Like
13

@john1, delete from line 30 to 44 and replace it with this

return (
  <div>
    <h5>The Disruptions<h5/>
    {disruptions.map(disruption => (
        <div>
          .. // your disruption data
        </div>
      ))
    }
  </div>
);
2 Likes
14

One thing i’d like to give you advice if you are not confortable with braces yet is keep everything equal

If you type { just close it imidiately with }, then get back inside the brackets, then continue with your code, so you dont mess up the pattern. But i believe vscode has the autoclose brackets tho

1 Like
15

Whoop! Finally it compiles but I get no data from the .map for example I am not getting the following:

            {disruption.title}
            <br />
            {disruption.mode}
            <br />
            {disruption.title}

So am I connecting properly to the API as in calling the right title / mode etc.

I am calling the following:

{disruption.title}

In the .map is this correct.

Also want to say a massive thank you for all the help I get in this forum, I lover FCC been here for about 4 years, plodding along and I love seeing this community grow - so many thanks!

John :slight_smile:

16

Hi John, sorry for just replying

seems like you had a “classic” react issue when the fetching not finished yet, but the component got rendered which gonna have a empty disruptions state.

1 Like
17

Ah well, that is a sucker then isn’t it, how does one remedy this? Maybe with componentWillMount?

Cheers!

18

I am going to use debounce if I can :slight_smile:

19

Still not working :frowning:

20

sorry just reply. been busy try to remake it.

go try this


return (
            <div>
                <h1>The Disruptions</h1>
                {disruptions.length > 0 ?
                    disruptions.map(post => {
                        return (
                            .. // your data
                        )
                    })
                    : (
                        <div>loading...</div>
                    )}
            </div>
        );

just imagine that the componentDidMount and render function running at the same time. So you need to handle the data when its not fetched yet (by printing loading..). Not the best practice tho checking the fetch status by using disruptions length. But it gets the job done

1 Like