React Hooks_useTabs

2021. 7. 7. 23:17Big 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