How to render an array of elements whose attributes are in a nested array of objects?

Question

I want to render a list of elements from an array of objects in react. However, it's not working properly.

My Datafile

export const PageBottomData = [

 {
    sectionName: "property1",
    listOfLinks: [
        {linkName: "value1", linkStatus: "inactive"},
        {linkName: "value2", linkStatus: "inactive"},
    ]

 },
 {
    sectionName: "property2",
    listOfLinks: [
        {linkName: "value1", linkStatus: "inactive"},
        {linkName: "value2", linkStatus: "inactive"}
    ]
 },
];

Though the data has been imported correctly( from console log), the data is not returned to the render method. I want to render a list of links whose name is taken from linkName attribute.

App.js

import React from 'react';
import {PageBottomData} from './PageBottomData';
class App extends React.Component {

sectionListGroup = (keyword) => {
    const listItems = PageBottomData.map(item => {
        if(item.sectionName === keyword)
            item.linkOfList.map((link, idx) => {
                <li key = {idx} className = "list-group-item">link.linkName</li>
            })
    });
    return listItems;
}

render() {
    return (
        <ul className = "list-group list-group-flush">
            {sectionListGroup("Discover")}
        </ul>
    );
}
export default App;

Error: 'sectionListGroup is undefined'

Can you please give the shape of the result you would like to have please ? — Quentin Grisel
– Quentin Grisel, Commented Feb 18, 2021 at 17:58

MUHAMMAD ILYAS · Accepted Answer · 2021-02-18 18:06:32Z

Solution:

Each map needs return statement

const PageBottomData = [
  {
    sectionName: "property1",
    listOfLinks: [
      { linkName: "value1", linkStatus: "inactive" },
      { linkName: "value2", linkStatus: "inactive" },
    ],
  },
  {
    sectionName: "Discover",
    listOfLinks: [
      { linkName: "value1 ", linkStatus: "inactive" },
      { linkName: "value2 ", linkStatus: "active" },
    ],
  },
];

class App extends React.Component {
  sectionListGroup = (keyword) => {
    return PageBottomData.map((item) => {
      if (item.sectionName === keyword)
        return item.listOfLinks.map((link, idx) => {
          return (
            <li key={idx}>
              {link.linkName} - {link.linkStatus}
            </li>
          );
        });
    });
  };

  render() {
    return <ul>{this.sectionListGroup("Discover")}</ul>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Archana Agivale · Accepted Answer · 2021-02-18 18:08:19Z

0

You had some minor error in your method "sectionListGroup", I updated method with correction.

sectionListGroup = (keyword) => {
    const listItems = PageBottomData.map(item => {
        if(item.sectionName === keyword)
        {
           return item.listOfLinks.map((link, idx) => {
               return  <li key = {idx} className = "list-group-item">{link.linkName}</li>
            })
        }
    });
    return listItems;
}

Also in the test example your not calling the method properly with right argument i.e {sectionListGroup("Discover")}. As we can see you are not having any data with the value "Discover", so check with other values you will get the answer.

answered Feb 18, 2021 at 18:08

Archana Agivale

4451 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to render an array of elements whose attributes are in a nested array of objects?

2 Answers 2

Solution:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related