Как в React.js вывести столько div сколько пришло в props компоненту?

Question

Как вывести заданное количество (amount) div-ов в компоненте React? Например пришло число 10 в amount - выводим 10 одинаковых div.

interface ISomeComponent {
   amount: number;
};

const SomeComponent:React.FC<ISomeComponent> = ({ amount }) => {

   return (
     <div></div> * amount
   );

}

Answer 1

 return (
    <>
      {Array.from(Array(amount).keys()).map(i => (
        <div />
      ))}
    </>
  );

Answer 2

Вот решение: принимает любое число и на всякий случай обработал случаи с 0 или undefined.

interface ISomeComponent {
  amount?: number;
}

export const SomeComponent: React.FC<ISomeComponent> = ({ amount }) => (
  <>
{ amount ? Array.from({ length: amount })
   .map((_, index) => <div key={`${index}/amount`} />) : null }
</>
);

БЛОГ НА HUSL

Как в React.js вывести столько div сколько пришло в props компоненту?

Ответы (2 шт):