React Hooks_useTabs
2021. 7. 7. 23:17ㆍBig Dreamer_Developer/React
const content = [
{
tab: 'Section 1',
content: "I'm the content of the Section 1",
},
{
tab: 'Section 2',
content: "I'm the content of the Section 2",
},
];
const useTabs = (initialTab, allTabs) => {
if (!allTabs || Array.isArray(allTabs)) {
return;
}
const [currentIndex, setCurrentIndex] = useState(initialState)
return {
currentItem: allTabs[currentIndex],
changeItem: setCurrentIndex
}
}
const App = () => {
const {currentItem} = useTabs(0, content)
return (
<div className="App">
{content.map((section, index) => (<button onClick={() => changeItem(index)}>{section.tab}</button>
))}
<div>
{currentItem.content}
</div>
</div>
};
'Big Dreamer_Developer > React' 카테고리의 다른 글
React Hooks_useEffect (0) | 2021.07.08 |
---|---|
React Hooks_useState (0) | 2021.07.07 |
React Hooks_useInput (0) | 2021.07.07 |
About the Router (0) | 2021.07.06 |
Rendering The Movies (0) | 2021.07.03 |