import { ReactNode, useRef, useState } from “react”
export interface TabsItemsProps {
id: number;
title: string;
text?: ReactNode | string;
}
const Tabs = () => {
const TabsItems: TabsItemsProps[] = [
{
id: 1,
title: 'Tab 1',
text: 'sadad'
},
{
id: 2,
title: 'Tab 2',
text: <div>12312312</div>
},
{
id: 3,
title: 'Tab 3',
text: '344'
},
{
id: 4,
title: 'Tab 4',
text: '123'
},
{
id: 5,
title: 'Tab 5',
text: 'zxc'
},
]
const [value, setValue] = useState(TabsItems[0].id)
const TabSearch = TabsItems.find((el) => el.id === value);
const bgg = document.querySelector(".tab__bg")
const RemovePrevious = (e, id) => {
setValue(id);
const brr = e.currentTarget.getBoundingClientRect().x
console.log(brr)
// const buttons = document.querySelectorAll("button")
// buttons.forEach((el => { el.classList.remove('active') }))
bgg!.setAttribute("style", 'left:' + (brr) + 'px');
}
return (
<div className="wrapper">
<div className="tabs__columns">
<div className="items">
{TabsItems.map((el) => {
return (
<button className="button "
onClick={(e) => {
e.stopPropagation();
RemovePrevious(e, el.id);
// e.currentTarget.classList.add('active')
}}>
{el.title}</button>
)
})}
</div>
<div className="tab__bg"></div>
<div className="text">
{/* {value === 1 && <TabsChildren id={id} />} */}
{/* {value === 2 && <div>222222</div>}
{value === 3 && <div>333333</div>}
{value === 4 && <div>444444</div>} */}
<p>{TabSearch.text}</p>
</div>
</div>
</div>
)
}
export default Tabs`
**Tabs selecting starts working on 2nd click on tab, i think problem here is hook useState how to solve it, or any suggestions please **
Maybe it s possible to do without useState
New contributor
ZOTRIN’s Rehab is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.