Делать материал типографии UI более эффективным?

Question

Здравствуйте, ниже у меня есть следующий код typograohy, который был заменен примерами, но действительно представляет мой код, как вы можете видеть, я должен был вызывать Typography несколько раз, и мне было интересно, есть ли более эффективный способ сделать это?

<Typography className = { classes.titleText } variant="title" >Main Details</Typography><Divider />
                    <Typography className = { classes.titleText } variant="subheading" >Example: </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >IExample:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example: </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>

Answer 1

["Text1","Text2",...,"TextN"].map(x => {
       <Typography className = { classes.titleText } variant="subheading">{x}</Typography>
})

Вы можете использовать функцию Array.prototype.map, чтобы сопоставить каждое значение с результатом функции. Поэтому я взял все имеющиеся у вас тексты, которые находятся в массиве, и сопоставил их каждый с элементом типографии с текстом внутри.

Вы можете прочитать все об этом с примерами здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map