Как вставить App() повторно на страницу?

Question

[Norwood]

Добрый день. Есть блок, который нужно вставить на страницу 5 раз. Я его сделал, но вот как вставить не знаю. Есть вариант в файле index.js написать 5 раз. Но это наверное не правильный вариант. Можете подсказать как это возможно сделать?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import './App.scss';
import {Button} from "./Button";

function App() {
  return (
    <div className="App">
      <div className="containerComponent">
        <div className="number">11</div>
        <Button/>
      </div>
    </div>
  );
}

export default App;

Answer 1

[Валерий]

ReactDOM.render(
  <React.StrictMode>
    {Array.from({length: 5}, () => <App />)}
  </React.StrictMode>,
  document.getElementById('root')
);

^_^

Comments

[Валерий]

Советую подумать как можно сделать более "грамотно". Чтобы рендерить лишь один компонент <App />. Подсказка: Провернуть тоже самое внутри компонента <App /> только с тем компонентом, который вы хотите "разместить" 5 раз.

[Norwood]

Валерий, думаю ваш подход правильный. Вы такую схему предлагаете?

import './App.scss';
import {Button} from "./Button";

function App() {
  return (
    <div className="App">
      <div className="containerComponent">
        <div className="number">11</div>
        <Button/>
      </div>
    </div>
  );

}
{Array.from({length: 5}, () => <App />)}

export default App;

[Валерий]

Не совсем, вам стоит отдельный компонент типа:

// component.jsx
import {Button} from "путь/до/компонента/Button";

export const MyComponentWhichIWantToRenderFiveTimes = () => {
  return (
    <div className="containerComponent">
      <div className="number">11</div>
      <Button />
    </div>
  );
};

// app.jsx
import './App.scss';
import {MyComponentWhichIWantToRenderFiveTimes} from 'component.jsx';

function App() {
  return (
    <div className="App">
      {Array.from({length: 5}, () => <MyComponentWhichIWantToRenderFiveTimes />)}
    </div>
  );
}

export default App;

// index.js
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

[Norwood]

спасибо огромное!