how to display an icon to a particular number given

February 6, 2023

please i want to display an icon according to a number given. for instance if the given number is 3 let 3 icon be display. please how can achieve this in TypeScript.

here is my code

const icons = <MdStar />
    const displayIcon = (number:any) => {
        let random: any = Math.floor((Math.random() * 4) + 1);
        if(random > 0 ){
            
            number.length === random
        }
        console.log(number);
    };

    displayIcon(icons)

>Solution :

You can do this by creating a randomNumber and from the number you can create a array. Finally map over the array and return the MdStar component.

function YourComponent() {
  const randomNumber: number = Math.floor(Math.random() * 4 + 1);

  return (
    <>
      {Array.from({ length: randomNumber }, (_, i) => i).map((_, i) => (
        <MdStar key={i} />
      ))}
    </>
  );
}