在 map ZC1C425268E68385D1AB5074C17A4 内调用更新 state function

Question

I am looking to add an auto increment counter to a map function that would populate a question number on my component.

I am not sure how best to call this function within the map function I have in place and any help would be greatly appreciated. I would be looking to place the updated count in the Typography with "Open Question" output.

    const [questionCounter, setQuestionCounter] = useState(0)

    const updateCounter = (e) => {
        setQuestionCounter(questionCounter++)
      }

    {quiz.question.map((questions) => (
          <Card elevation={6}>
            <Grid>
              <Accordion>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                >
                  <Typography>Open Question</Typography>

Answer 1

As suggested I am now using the index within the map function and adding 1 to the base when it starts so that each question has the correct number against it now in the accordion summary.

 <Typography className={classes.quizDescription}>{quiz.longDescription}</Typography>
        {quiz.question.map((questions, index) => (
          <Card elevation={6}>
            <Grid>
              <Accordion>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                >
                  <Typography>Open Question {index + 1}</Typography>
                </AccordionSummary>