渲染嵌套的 arrays 并仅通过显示键反应一次

Question

I have a nested array and I would like to render this array with JSX code such that key like array1 should be display once and the text should be displayed as list and then continue the same loop with the next array. I have tried using map function and for loop but could not achieve success.

sampleArray : [{"array1": [ {"text": "abc"},{"text": "def"}, {"text": "ghi"}],
               "array2":[{"text": "efg"}, {"text": "fgh"}]]

Please suggest me map function to iterate over this array to render into JSX code. Thanks

Answer 1

Hey I don't know if you made a mistake in your object, but here are two versions of this implementation with your object and with my update:

Ignore typings did it in TypeScript

export const Test = ({ className }: Test) => {
  const sampleArray = [
    {
      array1: [{ text: 'abc' }, { text: 'def' }, { text: 'ghi' }],
      array2: [{ text: 'efg' }, { text: 'fgh' }],
    },
  ]

  const sampleArray2 = [
    {
      array1: [{ text: 'abc' }, { text: 'def' }, { text: 'ghi' }],
    },
    {
      array2: [{ text: 'efg' }, { text: 'fgh' }],
    },
  ]
  return (
    <>
      {/* YOUR VERSION */}
      <div>
        {Object.keys(sampleArray[0]).map((key) => {
          return (
            <div>
              <div id="title">{key}</div>
              {sampleArray[0].map((item) => {
                return <div>{item.text}</div>
              })}
            </div>
          )
        })}
      </div>
      {/* UPDATED VERSION */}
      <div>
        {sampleArray2.map((key) => {
          const title = Object.keys(key)[0]
          return (
            <div>
              <div id="title">{title}</div>
              {key[title].map((item) => {
                return <div>{item.text}</div>
              })}
            </div>
          )
        })}
      </div>
    </>
  )
}