1

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

interface ISomeComponent {
   amount: number;
};

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

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

}
4
  • 2
    return new Array(10).map(() => <div></div>)
    – entithat
    30 ноя 2021 в 14:02
  • @entithat только, наверно, new Array(10)
    – hlearn
    30 ноя 2021 в 14:05
  • @hlearn, да-да, на автомате написал. Хотел Array.from({ length: 10 })
    – entithat
    30 ноя 2021 в 14:07
  • @entithat спасибо! Сделал вот так: Array.from(Array(amount).keys()).map(i => ( <div /> ))}
    – B. Metalyx
    30 ноя 2021 в 14:09

2 ответа 2

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

Вот решение: принимает любое число и на всякий случай обработал случаи с 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 }
</>
);

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 19 янв 2022 в 19:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.