React Rendering Issue

[terse plume]

This isn't directly a Tauri issue, Rather a general React issue

When I import a TSX file and attempt to show and hide in a tab system, the file isn't rendered.

import React from 'react'
import Example from '@/app/example' // Importing the TSX

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <article>
      <div data-tab='a'>

      </div>
      <div data-tab='b'>

      </div>
      <div data-tab='c'>
        <Example />
      </div>
      <div data-tab='d'>

      </div>
    </article>
  </React.StrictMode>
)

$(function () {
  showTab($('article div[data-tab=home]'))
  $('aside button').on('click', function () {
    var tabId = $(this).data('button')
    showTab($(`article div[data-tab='${tabId}']`))
    $('aside button').removeClass('active')
    $(this).addClass('active')
  })
})

// Problem with this???
function showTab(tabToShow: JQuery<HTMLElement>) {
  $('article div').hide()
  tabToShow.show()
}

In this example the <Example /> isn't shown when the div is hidden then shown again. How do I fix this issue? 😭

[wise seal]

if I'm reading this correctly I think you just need to change div[data-tab=home] to div[data-tab=c]? I don't work in React much, but I think you're just trying to call on a data-tab that doesn't exist

actually, initialize that data-tab to [data-tab="a"] and that should work..