Как я могу использовать дублированный цикл в React.js

Question

Как использовать дублированный цикл в React.js?

У меня есть массив в массиве, и я хочу его использовать.

У меня есть массив.И объекты находятся в массиве.И другой массив находится в этих объектах.

state = {
  myInformation: [
    {
      name: "jessie",
      age: 27,
      interests: ["react", "vue"]
    },
    {
      name: "ellie",
      age: 26,
      interests: ["java", "spring"]
    }
  ]
}

...

const information = this.state.myInformation.map(
  ({name, age, interests}) => (
    <div>{name}</div>
    <div>{age}</div>
    <div>{interests}</div>
  )
)

...

<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>

Answer 1

Используйте другую карту () внутри.

const information = this.state.myInformation.map(
  ({name, age, interests}) => (
    <div>{name}</div>
    <div>{age}</div>
    <div>{interests.map(interest => <div>{interest}</div>)}</div>
  )
)

Answer 2

Хотите показать элемент в «интересах»?

const information = this.state.myInformation.map(
  ({name, age, interests}) => (
    <div>{name}</div>
    <div>{age}</div>
    <div>{interests.join(', ')}</div>
  )
)