javascript - how to print stars 5 times as a pattern like 1 star and in 2nd line 2 stars likewise in react js?

Question

in vanilla javascript i know how to print stars in a pattern

var i,j
for(i=1; i<=5; i++)
{
  for(j=1; j<=i; j++)
     document.write("*")

  document.write("<br />")
 } 

How to achieve this in React JS and if possible can we use map function? Thanks in advance

Answer 1

I'm guessing you're asking how you would end up rendering it inside of React. There's several ways you could go about it, but here's a quick example of how I would go about it.

const Stars = () => {

  const handleStars = (lim) => {
    let arr = new Array(lim);
    for(let i=0; i<=lim; i++){
      let str = '';
      for(let j=-1; j<=i; j++){
        str += '*';
      }
      arr[i] = str;
    }

    return arr;
  }

  return (
    <div>Here be stars:

      {
        handleStars(5).map( (e, i) => {
          return <p key={i}>{e}</p>
        })
      }
    </div>
  )
}

export default Stars;