Петля внутри React JSX

Не уверенный, если это будет работать на Вашу ситуацию, но часто [карту] [1], хороший ответ.

, Если это было Вашим кодом с для цикла:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

Вы могли записать это как это с функцией карты:

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

objects.map является лучшим способом сделать, цикл, objects.filter является лучшим способом отфильтровать необходимые данные, и фильтрованные данные сформируют новый массив, objects.some является лучшим способом проверить, удовлетворяет ли массив данное условие (это возвращает булевскую переменную)

Существует несколько способов циклично выполнить внутренний JSX

1. Используя для цикла

function TableBodyForLoop(props) {
  const rows = []; // create an array to store list of tr

  for (let i = 0; i < props.people.length; i++) {
    const person = props.people[i];
    // push the tr to array, the key is important
    rows.push(
      <tr key={person.id}>
        <td>{person.id}</td>
        <td>{person.name}</td>
      </tr>
    );
  }

  // return the rows inside the tbody
  return <tbody>{rows}</tbody>; 
}

2. Используя метод карты массива ES6

function TableBody(props) {
  return (
    <tbody>
      {props.people.map(person => (
        <tr key={person.id}>
          <td>{person.id}</td>
          <td>{person.name}</td>
        </tr>
      ))}
    </tbody>
  );
}

Полный пример: https://codesandbox.io/s/cocky-meitner-yztif

следующее Реагирует, Документы будут полезны

• Списки и Ключи https://reactjs.org/docs/lists-and-keys.html
• Условное выражение, Представляющее https://reactjs.org/docs/conditional-rendering.html