title: I want to use Looping inside JavaScript array of Object
body: <p>This is my Sample code. I am using Shopify Polaris for my Shopify App Development Project. Here I am using JavaScript array of Object to load my component dynamically. Here I don't know how to use looping inside the JavaScript array of object to reduce my code.</p>
  <p>For Example,</p>
  <pre><code>for (i=0; i&lt;50; i++){ 
  const settype = [{label: +i+px, value: +i+px}];
  }
  </code></pre>
  <p>This is my exact requirement. I don't want to code more like below. Someone please help with working code. Thanks in Advance.</p>
  <pre><code> const SizeComponentPx = (props) =&gt; {
        const [value, setvalue] = useState(this.state[props.name]);
        const handleSelectChange = useCallback((value) =&gt; setvalue(value), [
          this.onChange(props.name, value),
        ]);
  
        const settype = [
          { label: &quot;0 px&quot;, value: &quot;0px&quot; },
          { label: &quot;1 px&quot;, value: &quot;1px&quot; },
          { label: &quot;2 px&quot;, value: &quot;2px&quot; },
          { label: &quot;3 px&quot;, value: &quot;3px&quot; },
          { label: &quot;4 px&quot;, value: &quot;4px&quot; },
          { label: &quot;5 px&quot;, value: &quot;5px&quot; },
          { label: &quot;6 px&quot;, value: &quot;6px&quot; },
          { label: &quot;7 px&quot;, value: &quot;7px&quot; },
          { label: &quot;8 px&quot;, value: &quot;8px&quot; },
          { label: &quot;9 px&quot;, value: &quot;1.4px&quot; },
          { label: &quot;10 px&quot;, value: &quot;1.5px&quot; },
          { label: &quot;11 px&quot;, value: &quot;11px&quot; },
          { label: &quot;12 px&quot;, value: &quot;12px&quot; },
          { label: &quot;13 px&quot;, value: &quot;13px&quot; },
          { label: &quot;14 px&quot;, value: &quot;14px&quot; },
          { label: &quot;15 px&quot;, value: &quot;15px&quot; },
          { label: &quot;16 px&quot;, value: &quot;16px&quot; },
          { label: &quot;17 px&quot;, value: &quot;17px&quot; },
          { label: &quot;18 px&quot;, value: &quot;18px&quot; },
          { label: &quot;19 px&quot;, value: &quot;19px&quot; },
          { label: &quot;20 px&quot;, value: &quot;20px&quot; },
          { label: &quot;21 px&quot;, value: &quot;21px&quot; },
          { label: &quot;22 px&quot;, value: &quot;22px&quot; },
          { label: &quot;23 px&quot;, value: &quot;23px&quot; },
          { label: &quot;24 px&quot;, value: &quot;24px&quot; },
          { label: &quot;25 px&quot;, value: &quot;25px&quot; },
          { label: &quot;26 px&quot;, value: &quot;26px&quot; },
          { label: &quot;27 px&quot;, value: &quot;27px&quot; },
          { label: &quot;28 px&quot;, value: &quot;28px&quot; },
          { label: &quot;29 px&quot;, value: &quot;29px&quot; },
          { label: &quot;30 px&quot;, value: &quot;30px&quot; },
          { label: &quot;31 px&quot;, value: &quot;31px&quot; },
          { label: &quot;32 px&quot;, value: &quot;32px&quot; },
          { label: &quot;33 px&quot;, value: &quot;33px&quot; },
          { label: &quot;34 px&quot;, value: &quot;34px&quot; },
          { label: &quot;35 px&quot;, value: &quot;35px&quot; },
          { label: &quot;36 px&quot;, value: &quot;36px&quot; },
          { label: &quot;37 px&quot;, value: &quot;37px&quot; },
          { label: &quot;38 px&quot;, value: &quot;38px&quot; },
          { label: &quot;39 px&quot;, value: &quot;39px&quot; },
          { label: &quot;40 px&quot;, value: &quot;40px&quot; },
          { label: &quot;41 px&quot;, value: &quot;41px&quot; },
          { label: &quot;42 px&quot;, value: &quot;42px&quot; },
          { label: &quot;43 px&quot;, value: &quot;43px&quot; },
          { label: &quot;44 px&quot;, value: &quot;44px&quot; },
          { label: &quot;45 px&quot;, value: &quot;45px&quot; },
          { label: &quot;46 px&quot;, value: &quot;46px&quot; },
          { label: &quot;47 px&quot;, value: &quot;47px&quot; },
          { label: &quot;48 px&quot;, value: &quot;48px&quot; },
          { label: &quot;49 px&quot;, value: &quot;49px&quot; },
          { label: &quot;50 px&quot;, value: &quot;50px&quot; },
  
        ];
  
        return (
          &lt;div className={&quot;faq_panels &quot; + props.class} value={value}&gt;
            &lt;Select
              label={props.label}
              options={settype}
              onChange={handleSelectChange}
              value={value}
              name={props.name}
            /&gt;
          &lt;/div&gt;
        );
      };
  </code></pre>