title: Create div elements dynamically within React component
body: <p>I want to make my component dynamically create elements according to my row count which comes from reducer. This is my static component return part:</p>
  <pre><code>return (
  &lt;Carousel  prevIcon={&lt;span aria-hidden=&quot;true&quot;  style={{width:&quot;15px&quot;,height:&quot;15px&quot;}} className=&quot;carousel-control-prev-icon&quot; /&gt;}
             nextIcon={&lt;span aria-hidden=&quot;true&quot;  style={{width:&quot;15px&quot;,height:&quot;15px&quot;}} className=&quot;carousel-control-next-icon&quot; /&gt;}
             activeIndex={index}
             onSelect={handleSelect}
             interval={null}&gt;
  
             &lt;Carousel.Item&gt;
                 &lt;div className={classes.icon}&gt;
                     {props.icon}
                 &lt;/div&gt;
                 &lt;Box style={props.style} className={classes.carousel} /&gt;
                 &lt;Carousel.Caption &gt;
                     &lt;div  className={classes.boxContent} &gt;
                         &lt;div className=&quot;row&quot;&gt;
                             &lt;div className=&quot;col-lg4 &quot;&gt;
                                 &lt;div className=&quot;mr-5&quot;&gt;
                                     &lt;p className={classes.typography}&gt;
                                         {props.firstTitle}
                                     &lt;/p&gt;
                                     {/*&lt;Typography className={classes.typography}&gt;&lt;/Typography&gt;*/}
                                     &lt;Typography className={classes.valueTypography} &gt;{props.firstValue}&lt;/Typography&gt;
                                 &lt;/div&gt;
                             &lt;/div&gt;
                         &lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/Carousel.Caption&gt;
             &lt;/Carousel.Item&gt;
             {
                 props.secondTitle == null ? null :
                     &lt;Carousel.Item&gt;
                         &lt;div className={classes.icon}&gt;
                             {props.icon}
                         &lt;/div&gt;
                         &lt;Box style={props.style} className={classes.carousel} /&gt;
  
                         &lt;Carousel.Caption&gt;
                             &lt;div className=&quot;container&quot;&gt;
                                 &lt;div className=&quot;row&quot;&gt;
                                     &lt;div className=&quot;col-lg3 col-sm-6 col-xs-12 d-flex &quot;&gt;
                                         &lt;div className=&quot;mr-5&quot;&gt;
                                             &lt;Typography className={classes.typography}&gt;{props.secondTitle}&lt;/Typography&gt;
                                             &lt;Typography
                                                 className={classes.valueTypography}&gt;{props.secondValue}&lt;/Typography&gt;
                                         &lt;/div&gt;
  
                                     &lt;/div&gt;
  
                                 &lt;/div&gt;
                             &lt;/div&gt;
                         &lt;/Carousel.Caption&gt;
                     &lt;/Carousel.Item&gt; 
  }&lt;/Carousel&gt;
     ); 
  </code></pre>
  <p>As you can see from the code i use props.firstTitle and props.secondTitle to take second value. How can i increment the div tags according to props count. Also in the main. js i use something like that to call the props.</p>
  <pre><code> &lt;BMCarouselComponent
          icon={&lt;ViewAgenda /&gt;}
          firstTitle={&quot;TEST1&quot;} firstValue={props.otherInventoryPayload?.rows[0].Amount}
          secondTitle={TEST4} secondValue={props.otherInventoryPayload?.rows[1].Amount}
                                  
  
    /&gt;
  
  </code></pre>