Реагировать на вложенные циклы и ключи - PullRequest
Новая
       51

Реагировать на вложенные циклы и ключи

0 голосов
/ 18 июня 2020

Я пытаюсь заставить работать немного кода реакции и борюсь с условным рендерингом. Следующее: 

      <div id="table_holder" className="table-responsive mx-3">
        <table className="table-sm">
          {Tables.map((tableRows, index) => (
            <thead key={'headeer'+index.toString()}><tr key={index.toString()}>
            {tableRows.map((tableRow, i) => (
              <th key={i.toString()}>
                {i}
              </th>
            ))}
            </tr></thead>
          ))}
        </table>
      </div>
      );

работает, но я хотел бы условно отображать разные ячейки таблицы в зависимости от значения ключа 'type' в объекте tableRow. И не могу управлять правильным синтаксисом

Спасибо

1 Ответ

0 голосов
/ 18 июня 2020

Ваш первый l oop не назначает уникальный ключ для div. Это может быть проблемой. Попробуйте дать ключ вот так.

<key={index}>

 <table className="table-sm">
          {Tables.map((tableRows, index) => (
            <key={index}>
            {tableRows.map((tableRow, i) => (
              <th key={i+index.toString()}>
                {i}
              </th>
            ))}
            </>
          ))}
        </table>

ОБНОВЛЕНИЕ 2

Вот как вы можете использовать условный рендеринг в реакции. 

  var tableRow = [1, 2, 4, 6, 7];
  return (
    <div className="App">
      <h1>Your React App</h1>
      {tableRow.map((table, index) => {
        if (table % 2) {
          return <div key={index}>{table}</div>;
        }
      })}
    </div>
  );
...