Как организовать переиспользуемый код в блоке?

Для организации переиспользуемого кода в блоке можно использовать компоненты в React.

Чтобы вынести элементы `<li>` в переиспользуемый блок в компоненте `<Comp>`, достаточно передать их в компоненту в качестве свойства (prop). 

Пример:

1. В файле `Comp.js` определите компонент `<Comp>`, который будет принимать массив элементов `<li>` в качестве свойства:

```javascript
import React from 'react';

const Comp = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default Comp;
```

2. В другом файле, где вы используете компонент `<Comp>`, передайте массив элементов `<li>` в свойстве `items`:

```javascript
import React from 'react';
import Comp from './Comp';

const App = () => {
  const listItems = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>My Component</h1>
      <Comp items={listItems} />
    </div>
  );
};

export default App;
```

Теперь у вас есть переиспользуемый компонент `<Comp>`, который можно использовать в других местах вашего приложения, просто передавая ему массив элементов `<li>` через свойство `items`. Он сохраняет возможность поддерживать произвольное количество элементов `<li>`, так как позволяет передавать массив переменной длины.

const data = [{header: "1", text: "1"}, {header: "2", text: "2"}];

const LiItem = ({header, text}) => (
  <li>
    <h2>{header}</h2>
    <p>{text}</p>
  </li>
);

const Comp = () => (
  <div>
    <ul>
      {data.map((el, idx) => <LiItem key={idx} header={el.header} text={el.text} />)}
    </ul>
  </div>
);

В данном случае нет единственно правильного способа переформулирования. Вы можете выбрать наиболее удобный для вас. 
Я бы предложил простой вариант, не вдаваясь в детали (пропсы опущены):
const Comp = () => (
  <div>
    <ul>
      {data.map((item) => (
        <li>
          <h2>Cap1</h2>
          <p>Text1</p>
        </li>
      ))}
    </ul>
  </div>
); 
P.S. Если все же хотите разделить, вы можете оставить тег li в родительском компоненте и вынести только его содержимое в отдельный компонент. Таким образом, связанные семантически теги HTML не будут разбросаны по разным файлам.