Nested Array Map

Question

class Array extends React.Component {
  constructor() {
        super();
        this.state = {
            newArray: [
                  {
                    "Category": "Category1",
                    "value": [
                      {
                        "Name": "Name1"
                      },
                      {
                        "Name": "Name2"
                      },
                      {
                        "Name": "Name4"
                      }
                    ]
                  },
                  {
                    "Category": "Category2",
                    "value": [
                      {
                        "Name": "Name3"
                      }
                    ]
                  }
                ],
        };
    }

  render() {
    var nestedArray = this.state.newArray.map((title, index) => {
      return(
        <div key={`nestedArray_${index}`}>
          <div key={`category_${title}`}>{title.Category}</div>
        </div>
      )
    })

    return (
      <div>
        <h1>{nestedArray}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Array />,
  document.getElementById('root')
);

Codepen for current code: https://codepen.io/anon/pen/GePyBa

I have it displaying like this currently:

Category1

Category2

Ideally, I want it to be:

Category1

Name1

Name2

Name4

Category2

Name3

I've tried searching for answers, but nothing has really worked.

I tried doing something like this, but it doesn't work:

 render() {
    var innerArray = this.state.newArray.map((values) => {
      return {this.state.newArray.value[values].map((name, index) => {
        return (
          <div key={`value_${name}`}>{name.Name}</div>
        )
      })}
    })
    var nestedArray = this.state.newArray.map((title, index) => {
      return(
        <div key={`nestedArray_${index}`}>
          <div key={`category_${title}`}>{title.Category}</div>
          {innerArray}
        </div>
      )
    })

    return (
      <div>
        <h1>{nestedArray}</h1>
      </div>
    );
  }

New to Javascript and React, so I appreciate the help.

Tholle · Accepted Answer · 2019-03-22 17:07:53Z

You want to use map on each value array in every title object as well to render all the Name properties.

Example

class App extends React.Component {
  state = {
    newArray: [
      {
        Category: "Category1",
        value: [
          {
            Name: "Name1"
          },
          {
            Name: "Name2"
          },
          {
            Name: "Name4"
          }
        ]
      },
      {
        Category: "Category2",
        value: [
          {
            Name: "Name3"
          }
        ]
      }
    ]
  };

  render() {
    var nestedArray = this.state.newArray.map((title, index) => {
      return (
        <div key={index}>
          <h1>{title.Category}</h1>
          {title.value.map((val, index) => (
            <div key={index}>{val.Name}</div>
          ))}
        </div>
      );
    });

    return (
      <div>
        {nestedArray}
      </div>
    );
  }
}

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>

Sai Sandeep Vaddi · Accepted Answer · 2019-03-22 17:39:16Z

0

The answer by @Tholle works. I just want to add that do not name your component as Array. It will throw errors thinking you are modifying JavaScript's in-built Array object.

That is why in your codepen example, even if you map on nested value, it throws TypeError: Class constructor Array cannot be invoked without 'new' error.

answered Mar 22, 2019 at 17:39

Sai Sandeep Vaddi

2903 silver badges9 bronze badges

1 Comment

ldesigns Over a year ago

Thanks for this comment. I didn't really name the component Array. It was just there as a placeholder.

Collectives™ on Stack Overflow

Nested Array Map

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related