[esercizio] React Hooks 3
React Hooks 연습하기
3. useTab
import React, { useState } from "react";
const content = [
{
tab: "section1",
contents: "🐶"
},
{
tab: "section2",
contents: "🐯"
}
];
//I wrote wrong names on this array.
const useTab = (initial, allTabs) => {
if(!allTabs || !Array.isArray(allTabls)){
return ;
}
const [ currentIdx, setIdx ] = useState(initial, allTabs)
return {
currentItem : allTabs[currentIdx],
showItem : setIdx
};
};
const App = () => {
const { currentItem, showItem } = useTab(1, content);
return (
<div className="App">
<div>useTab</div>
{content.map((section, idx) => (
<button onClick = {() => showItem(idx) }>{section.tab}</button>
))}
<div>{currentItem.contents}</div>
</div>
);
};
export default App;
3. 결과물
import React, { useState } from "react";
const content = [
{
tab: "section1",
contents: "🐶"
},
{
tab: "section2",
contents: "🐯"
}
];
//I wrote wrong names on this array.
const useTab = (initial, allTabs) => {
if(!allTabs || !Array.isArray(allTabls)){
return ;
}
const [ currentIdx, setIdx ] = useState(initial, allTabs)
return {
currentItem : allTabs[currentIdx],
showItem : setIdx
};
};
const App = () => {
const { currentItem, showItem } = useTab(1, content);
return (
<div className="App">
<div>useTab</div>
{content.map((section, idx) => (
<button onClick = {() => showItem(idx) }>{section.tab}</button>
))}
<div>{currentItem.contents}</div>
</div>
);
};
export default App;
Author And Source
이 문제에 관하여([esercizio] React Hooks 3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yrkimyy/esercizio-React-Hooks-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)