Map 在 ReactJs 中一一通過對象數組而不是列出數組

Question

我有一個反應功能組件

const Quiz = () => {
   const [Quizdata, setQuizdata] = useState([{name: 'John'},{name: 'jack'}])
 
   return (
    {Quizdata.map(quiz => {<h1>{quiz.name}</h1>)}
   )
}

在上面的代碼中，我將獲得 object 的列表，但我想顯示 Quizdata 數組的單個元素，並且我想通過下一個按鈕遍歷整個數組

Answer 1

你的意思可能是這樣的..？

const App = () => {

    const [Quizdata, setQuizdata] = useState([{name: 'John'}, {name: 'jack'}])
    const [selected, setSelected] = useState(0)

    const handleNext = () => {
        setSelected(selected + 1)
    }

    const handlePrevious = () => {
        setSelected(selected - 1)
    }


    return (
        <div>
            <button onClick={handlePrevious}>Previous</button>
            <button onClick={handleNext}>Next</button>
            <p>{Quizdata[selected].name}</p>
        </div>
    )
}