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:

return (
<Carousel  prevIcon={<span aria-hidden="true"  style={{width:"15px",height:"15px"}} className="carousel-control-prev-icon" />}
           nextIcon={<span aria-hidden="true"  style={{width:"15px",height:"15px"}} className="carousel-control-next-icon" />}
           activeIndex={index}
           onSelect={handleSelect}
           interval={null}>

           <Carousel.Item>
               <div className={classes.icon}>
                   {props.icon}
               </div>
               <Box style={props.style} className={classes.carousel} />
               <Carousel.Caption >
                   <div  className={classes.boxContent} >
                       <div className="row">
                           <div className="col-lg4 ">
                               <div className="mr-5">
                                   <p className={classes.typography}>
                                       {props.firstTitle}
                                   </p>
                                   {/*<Typography className={classes.typography}></Typography>*/}
                                   <Typography className={classes.valueTypography} >{props.firstValue}</Typography>
                               </div>
                           </div>
                       </div>
                   </div>
               </Carousel.Caption>
           </Carousel.Item>
           {
               props.secondTitle == null ? null :
                   <Carousel.Item>
                       <div className={classes.icon}>
                           {props.icon}
                       </div>
                       <Box style={props.style} className={classes.carousel} />

                       <Carousel.Caption>
                           <div className="container">
                               <div className="row">
                                   <div className="col-lg3 col-sm-6 col-xs-12 d-flex ">
                                       <div className="mr-5">
                                           <Typography className={classes.typography}>{props.secondTitle}</Typography>
                                           <Typography
                                               className={classes.valueTypography}>{props.secondValue}</Typography>
                                       </div>

                                   </div>

                               </div>
                           </div>
                       </Carousel.Caption>
                   </Carousel.Item> 
}</Carousel>
   ); 

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.

 <BMCarouselComponent
        icon={<ViewAgenda />}
        firstTitle={"TEST1"} firstValue={props.otherInventoryPayload?.rows[0].Amount}
        secondTitle={TEST4} secondValue={props.otherInventoryPayload?.rows[1].Amount}
                                

  />

CodePudding user response：

Here is an example how you can dynamically create elements in React:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 3 };
  }


  render() {
    return (
      <div>
        {[...Array(this.state.count)].map((e, i) => <div key={i}>Row {i}</div>)}
      </div>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

from what I understood, you are trying to pass a variable number of titles and display each title in a div.

I suggest to pass all your titles in a single prop as an array, then map it to div using map function

<BMCarouselComponent
        icon={<ViewAgenda />}
        titles = [...allTitles]                                
  />

const titleDivs = titles.map(title => <div>{title}</div>);