When the user press the button next function NextQuestion will be called this function should be able to loop randomly through data (array of objects with two properties name and description) without repeating the same elements each time the user press the button next and then after it finishes showing all elements it should call another function to alert me (for future developing)
import React, {useContext} from 'react';
import CheckAnswer from './CheckAnswer';
import { RandomIntContext } from '../Contexts/RandIntContext';
import { ExamStateContext } from '../Contexts/ExamStateContext';
import { DataContext } from '../Contexts/DataContext';
import { ButtonGroup, ToggleButton, Button } from 'react-bootstrap';
const NextQuestion = () => {
const {randInt, setRandInt} = useContext(RandomIntContext);
const {examState, setExamState} = useContext(ExamStateContext);
const {data} = useContext(DataContext);
const nextQuestion = () => {
setRandInt(Math.floor(Math.random() * data.length));
}
return (
<div className="next_cont">
<div>
<ButtonGroup>
<ToggleButton type="radio" variant="outline-dark" value="word" size="md" checked= {examState === "word"} onClick={(e) => setExamState("word")}> Word</ToggleButton>
<ToggleButton type="radio" variant="outline-dark" value="description" size="md" checked= {examState === "description"} onClick={(e) => setExamState("description")}> Description</ToggleButton>
</ButtonGroup>
</div>
<h3>{examState === "word" ? "What is the description of the word" : "What is the word that describes"} {data[randInt][examState]}</h3>
<CheckAnswer/>
<div>
<Button variant="outline-dark" onClick={nextQuestion}>Next</Button>
</div>
</div>
)
}
export default NextQuestion