React mapping nested data

Question

I'm having a problem with my React app. When I post a new project to my backend, I click the button to return me to the site dashboard where I can view a list of projects, I get the following error:

Uncaught TypeError: Cannot read property 'name' of undefined

Main.jsx

Map Function:

{props.sites.map((site) => (
 <tr key={site.id}>
 <td data-label="Project">{site.site.name}</td>
          ... //remaining code

However, if I reload the page, all the data is shown.

In React Developer Tools, if I look at how props are passed, I can see name as one of the pieces of available data.


|_sites
  |_ 0
   |_id" 22
   |_site
      |_id: 44
      |_name: "test"

However, name is nested under site which is nested under sites.

When using the .map function, I have to use the keyword site to render a list of sites. Is this causing a conflict with the keyword site that is already in my backend data structure?

    this.state = {
      sites: [],
      siteFormData: {
        name: '',
      },
   }

If so, what is the best practice to fix this?

norbitrial · Accepted Answer · 2020-01-03 21:15:25Z

2

From your array structure it seems that you made a mistake once you tried to access site.site.name which does not really exist. Instead it should be site.name.

Technically in the first case site.site becomes undefined which does not have a name property and that's why you got that error message.

Just correct the line as the following:

<td data-label="Project">{site.name}</td>

I hope that helps!

answered Jan 3, 2020 at 21:15

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

2 Comments

Noble Polygon Over a year ago

I tried that which does remove the error but doesn't list the name if the project. However, if I go one level up to site.id, it will return the I'd number (22) in the table.

norbitrial Over a year ago

Can you do a console.log(props.sites) to see what are the properties and values? Based on that we can figure out where is trick.

Yevhen Horbunkov · Accepted Answer · 2020-01-03 21:33:40Z

2

With React it is a common thing to use destructuring assignment syntax for such purposes, i.e. to avoid above confusion you may go, like:

{props.sites.map(({id,site}) => (
 <tr key={id}>
 <td data-label="Project">{site.name}</td>

Or even go a bit further, since key doesn't necessarily have to correspond to your object properties:

{props.sites.map(({site:{name}},key) => (
 <tr key={key}>
 <td data-label="Project">{name}</td>

answered Jan 3, 2020 at 21:33

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

React mapping nested data

Main.jsx

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Main.jsx

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related