updating component.tsx to fix issue with anchor sub links not working…

[nahomtefera]

1645 … on Props and Theming tabs

https://github.com/chakra-ui/chakra-ui-docs/issues/1645

📝 Description

The anchor links on the "Props" and "Theming" tabs aren't working properly in the "On This Page" side bar.

Add a brief description

⛳️ Current behavior (updates)

When clicking on the anchor links on the right sidebar in the Props and Theming tabs, the view doesn't scroll into the correct section.

After digging into this, here's what I found:

When switching to Props and Theming tabs in the doc, the inner html of the Usage tab gets updated with the data for the Props or Theming tabs

The problem lies in the Component.tsx file. There's a condition in the map iteration that displays children when index === 0 (which is the "Usage" tab), causing unexpected behavior.

  {tabsData.map((item, index) => (
    <Box key={index} id={item.id} hidden={!tabsData[index].match}>

      {index === 0 ? children : <MDXContent doc={item.doc} />}

    </Box>
  ))}

🚀 New behavior

To fix this, I've modified the code to remove the MDXContent component from the conditional. This ensures that the "Usage" Tab only receives the doc that corresponds to it.

  {tabsData.map((item, index) => (
    <Box key={index} id={item.id} hidden={!tabsData[index].match}>

      {index === 0 ?? children}

      <MDXContent doc={item.doc} />

    </Box>
  ))}

💣 Is this a breaking change (Yes/No):

NO

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
chakra-ui-docs	✅ Ready (Inspect)	Visit Preview	Sep 25, 2023 9:36pm

[cschroeter]

Thanks mate but there are still some issues with your suggested solution. I will have a closer look once we moved the docs repo into the chakra ui mono repo.