React JS嵌套数组内容输出问题及标签历史功能实现咨询

我正尝试扩展标签数组的功能，实现类似Chrome的前进后退按钮，让用户可以浏览标签内的历史记录。

tabArray示例 #

const [tabArray, setTabArray] = useState([
  {
    ContentList: [
      { TabText: 'Home', Content: <Home/>, Current: false },
      { TabText: 'Convert Temp', Content: <ConvertTemp/>, Current: true }
    ],
    Selected: true
  }
])

tabArray的结构为：每个对象包含ContentList数组（存储标签文本、显示内容、控制标签历史前进后退的Current布尔值），以及控制标签激活状态的Selected布尔值。

我最初遇到的问题是无法正确输出tabArray中的ContentList内容，控制台输出符合预期但返回值无法正常显示。

已解决的代码实现 #

标签栏文本显示代码（已解决） #

<tr>
  {tabArray.map((v, index) => {
    return (
      v.ContentList
        .filter(list => list.Current)
        .map(list => 
          <td key={index} 
              className={v.Selected ? "selected" : "hide"} > 
            <div className="TabText" onClick={() => selectByIndex(index, setTabArray)}>{list.TabText}</div>
            <button className="CloseTab" onClick={() => deleteByIndex(index, setTabArray)} >x</button>
          </td>
        )
    )
  })}
</tr>

通过提升return层级解决了标签栏文本显示问题。

标签内容显示代码（已解决） #

let tabContent = [
  tabArray.map((v, index) => {
    return(
      v.Selected ?
        v.ContentList
          .filter(list => list.Current)
          .map(list => 
            <div key={index}> {list.Content} </div>
          )
      :
        v.ContentList
          .filter(list => list.Current)
          .map(list => {
              return <div key={index} className='hidden'> {list.Content} </div>
          })
    )
  })
]

// console.log(tabContent)

return tabContent

通过提升return层级并修正大小写（current改为Current）解决了标签内容显示问题。

希望能获得更多技术帮助，若描述不够清晰我可以补充更多细节，提前感谢。

内容的提问来源于stack exchange，提问作者David P