обработка вложенных массивов в REACT / JSX

Question

Итак, я использую gatsby js и реагирую на создание веб-страницы. Теперь у меня есть два вложенных массива A и B, у каждого из которых есть два подмассива.

A = [['a'],['b']];
B = [['COQ', 'CCC'], ['CCCM', 'CK']];

Я хотел бы представить эти два массива на веб-странице следующим образом:

компонент A:

'a': 'COQ', 'CCC'

компонент B:

'b': 'CCCM', 'CK'

Я знаю, что, вероятно, мне следует использовать .map (), но я не совсем понимаю трюк.

Мой код:

import React from "react"

const Test = () => {
  const fileNames = [["a"], ["b"]]
  const test = [
    ["COQ", "CCC"],
    ["CCCM", "CK"],
  ]

  // function dispChem(p2, index) {
  //     return p2[index];
  // }
  
  return (
    <div>
      Hi
      <div>
        <ul>
          {fileNames.map((fileName, index) => (
            <div key={fileName}>
              <li>
                {fileName}
                {test.map((res, index) => (
                  <div key={index}>
                    {res}
                    {console.log(res)}
                    {console.log(index)}
                  </div>
                ))}
              </li>
            </div>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default Test

результат:

Hi
a
COQCCC
CCCMCK
b
COQCCC
CCCMCK

Помогите пожалуйста! Спасибо!

Answer 1

Вы можете перенести 2 массива в один объект.

const fileNames = [['a'], ['b']];
const test = [['COQ', 'CCC'], ['CCCM', 'CK']];

const newFiles = fileNames.map((f, index)=>{
  //console.log(f, index);
  return {[f]:test[index]};
});
console.log(newFiles);

Answer 2

Вы можете использовать индекс, полученный из вашего первого .map(), чтобы получить связанный массив из test. Затем вы можете использовать на нем .join(), чтобы превратить его в строку, которую вы можете объединить с fileName.

{fileNames.map((fileName, index) =>
  <div key={fileName}>
    <li>
      {`${fileName}: ${test[index].join(', ')}`}
    </li>
  </div>
)}

См. Пример ниже:

const Test = () => {
    const fileNames = [['a'], ['b']];
    const test = [['COQ', 'CCC'], ['CCCM', 'CK']];

    return (
        <div>
            Hi
            <div>
                <ul>
                    {fileNames.map((fileName, index) =>
                        <div key={fileName}>
                            <li>
                                {`${fileName}: ${test[index].join(', ')}`}
                            </li>
                        </div>


                    )}
                </ul>
            </div>
        </div>
    )
}

ReactDOM.render(<Test />, document.body);

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