React：渲染數組中的每個組件

Question

在我的應用程序中，我希望 React MUI 庫組件AccordionDetails顯示數組targetTypeData中的每個元素（數組的長度當前始終為 6）。 該數組包含一個Typography組件。

我當前的解決方案正確顯示數據有局限性並且不簡潔。 是否有另一種方法來呈現數組中的每個元素？

  var targetTypeData = [];
          for(let i=0; i<targetTypes.length;i++){
            targetTypeData.push(
              <Typography sx={{ fontSize: 14 }} 
              color= {"white" } >
              {`${targetTypes[i].toString()} : ${targetNumberData[i].toString()}`}
            </Typography> 
            )
          }

   //more code
          <AccordionDetails>
              <Typography>
                {targetTypeData[0]}
                {targetTypeData[1]}
                {targetTypeData[2]}
                {targetTypeData[3]}
                {targetTypeData[4]}
                {targetTypeData[5]}

              </Typography>

            
        </AccordionDetails>

Answer 1

（已編輯）試試這個：

      var targetTypeData = [];
      for(let i=0; i<targetTypes.length;i++){
        targetTypeData.push(
          `${targetTypes[i].toString()} : ${targetNumberData[i].toString()}` 
        )
      }
      // more code
      <AccordionDetails>
            {targetTypeData.map((item) => (
               <Typography sx={{ fontSize: 14 }} color= {"white"} >
                   {item}
               </Typography> 
            ))}
      </AccordionDetails>