[esercizio] React Hooks 3
6650 ワード
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.成果
Reference
この問題について([esercizio] React Hooks 3), 我々は、より多くの情報をここで見つけました
https://velog.io/@yrkimyy/esercizio-React-Hooks-3
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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;
Reference
この問題について([esercizio] React Hooks 3), 我々は、より多くの情報をここで見つけました https://velog.io/@yrkimyy/esercizio-React-Hooks-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol