Карта вложенных массивов

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 для текущего кода: https://codepen.io/anon/pen/GePyBa

У меня сейчас так:

Категория1

Категория2

В идеале, я хочу, чтобы это было:

Категория1

Name1

Name2

Name4

Категория2

name3

Я пытался искать ответы, но ничего не помогло.

Я пытался сделать что-то подобное, но это не сработало:

 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>
    );
  }

Впервые в Javascript и React, поэтому я ценю помощь.

Answer 1

Вы хотите использовать map для каждого value массива в каждом title объекте, а также для визуализации всех свойств Name.

Пример

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>

Answer 2

Ответ от @Tholle работает.Я просто хочу добавить, что не называйте ваш компонент как Array.Он будет выдавать ошибки, если вы будете изменять встроенный в JavaScript объект Array.

Именно поэтому в вашем примере с кодом, даже если вы отображаете вложенный value, он выдает TypeError: Class constructor Array cannot be invoked without 'new' error.