如何在反应中渲染数组数组

Question

Need to render arrays of arrays --> which contain objects

On JSX / HTML I should have for every sub-array one <li></li> tag, inside of that tag render objects from an array when this sub-array is rendered, I should move on next array and render next arrays in new <li></li tag

Problem in my implemntation is cus all sub-arrays are rendered inside of one <li></li> :

renderList = () => {
   return searchHelpers.logicalExamples.map((tagsArray) =>
      tagsArray.map((tag, i) => (
        <li className="label">
          <button>
            <span className="selected">{tag.name}</span>
          </button>
        </li>
      ))
    );
  };

This is object which is used for rendering lists:

const searchHelpers = {
  logicalExamples: [
    [
      { name: 'TX Group', tagTypeClass: '' },
      { name: 'AND', tagTypeClass: 'operator' },
      { name: 'Latest News', tagTypeClass: 'new-tag' }
    ],
    [
      { name: 'Pochettino', tagTypeClass: '' },
      { name: 'NOT', tagTypeClass: 'operator' },
      { name: 'Mourinho', tagTypeClass: '' }
    ],
    [
      { name: 'Cristobal Huet', tagTypeClass: '' },
      { name: 'OR', tagTypeClass: 'operator' },
      { name: 'Nico Hischier', tagTypeClass: '' }
    ],
    [
      { name: '(', tagTypeClass: 'new-tag' },
      { name: 'Climate Change', tagTypeClass: 'new-tag' },
      { name: ')', tagTypeClass: 'new-tag' }
    ]
  ]
};

Answer 1

So you want each element of logicalExamples to render as an <li> . That looks like this:

renderList = () => {
   return searchHelpers.logicalExamples.map((tagsArray) =>
      <li className="label">
        // something goes here
      </li>
    );
  };

And for each element of tagsArray you want a <button> :

renderList = () => {
   return searchHelpers.logicalExamples.map((tagsArray) =>
      <li className="label">
        {tagsArray.map((tag, i) => (
          <button>
            <span className="selected">{tag.name}</span>
          </button>
        }
      ))
      </li>
    );
  };

Answer 2

I like to use/create a flatMap function for this kind of scenario. I believe lodash has one, but it's tiny enough if you don't want to bundle in a library of that magnitude:

function flatMap(items, fn) {
  return items.reduce((result, item, i) => result.concat(fn(item, i)), []);
}

You can use it like this:

renderList = () => flatMap(searchHelpers.logicalExamples, (tagsArray) =>
  tagsArray.map((tag, i) => (
    <li className="label">
      <button>
        <span className="selected">{tag.name}</span>
      </button>
    </li>
  ))
);

Don't forget to add a key , though!

Update :

OK, wasn't clear on what you needed before. All you'll need to do is:

renderList = () => searchHelpers.logicalExamples.map((tagsArray) => (
  <li className="label">
    {tagsArray.map((tag, i) => (
      <button>
        <span className="selected">{tag.name}</span>
      </button>
    ))}
  </li>
));