Quiero agregar un atributo y agregar una clase en reaccionar js. Estoy tratando de crear TABS usando reaccionar. Quiero agregar una clase hidden cuando el ancho del elemento de la Tab es más de 45px y el nuevo atributo aria-hidden con valor true . ¿Puedes decirme cómo hacer esto?

componente

 <Tabs> {data.map((i, index) => ( <li key={index}>{i}</li> ))} </Tabs>

Tabulaciones.js

 const getTabs = () => { console.log("get tabs"); const { blockWidth, tabsTotalWidth, tabDimensions, showMoreWidth } = state; let tabIndex = 0; let availableWidth = blockWidth - showMoreWidth; return children.reduce( (result, tabItem, index, arr) => { const { key = index } = tabItem.props; const tabWidth = tabDimensions[key] ? tabDimensions[key].width : 0; if (tabWidth < 45) { // aria-hidden= false // remove hidden class tabItem if present. result.tabsVisible.push(tabItem); } else { // aria-hidden= true // add hidden class tabItem result.tabsHidden.push(tabItem); } /* eslint-enable no-param-reassign */ availableWidth -= tabWidth; return result; }, { tabsVisible: [], tabsHidden: [] } ); };

aquí está mi código

https://codesandbox.io/s/reverent-hermann-yt7es?file=/src/tabs.js:2147-2486

Estoy renderizando una pestaña como esta

 return ( <ul ref={tabsRef} className="rc64nav"> {/* {children} */} {tabsVisible.reduce((result, tabItem, tabIndex) => { result.push(tabItem); return result; }, [])} {tabsHidden.reduce((result, tabItem, tabIndex) => { result.push(tabItem); return result; }, [])} </ul>