title: Get All TextField values from loop in Next.js when I press Submit button
body: <p>first of all look at these below screenshots:
  <a href="https://i.stack.imgur.com/E5zH1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5zH1.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/sE2YU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sE2YU.png" alt="enter image description here" /></a></p>
  <p>There are two tasks which I want to achieve:</p>
  <ol>
  <li>There are two questions shown on the page using the array map method, by default I'm showing only one question, and when I press the next part button the second question will appear with the same question and a TextField (multiline). Now I've implemented a word counter in TextField but when I type something in 1st question the counter works properly. But when I go to the next question the here counter shows the previous question's word counter value, I want them to separately work for both questions.</li>
  <li>When I click on the next part and again when I click on the previous part then the values from TextField are removed automatically. I want the values there if I navigate to the previous and next part questions. Also, I want to get both TextField values for a form submission when I press the Submit Test button.</li>
  </ol>
  <blockquote>
  <p>Below are my codes for this page. I'm using Next.js and MUI</p>
  </blockquote>
  <pre><code>import { Grid, Typography, Box, NoSsr, TextField } from '@mui/material';
  import PersonIcon from '@mui/icons-material/Person';
  import Timer from '../../../components/timer';
  import Button from '@mui/material/Button';
  import { useState } from 'react';
  import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
  import { Scrollbars } from 'react-custom-scrollbars';
  import AppBar from '@mui/material/AppBar';
  import Toolbar from '@mui/material/Toolbar';
  import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
  import axios from '../../../lib/axios';
  import { decode } from 'html-entities';
  import { blueGrey } from '@mui/material/colors';
  
  export default function Writing({ questions }) {
      const [show, setShow] = useState(false);
      const [show1, setShow1] = useState(true);
  
      const [showQuestionCounter, setShowQuestionCounter] = useState(0);
      const [wordsCount, setWordsCount] = useState(0);
  
      return (
          &lt;&gt;
              &lt;Box sx={{ flexGrow: 1 }}&gt;
                  &lt;AppBar position=&quot;fixed&quot; style={{ background: blueGrey[900] }}&gt;
                      &lt;Toolbar&gt;
                          &lt;Grid container spacing={2} alignItems=&quot;center&quot;&gt;
                              &lt;Grid item xs={4} display=&quot;flex&quot; alignItems=&quot;center&quot;&gt;
                                  &lt;PersonIcon
                                      sx={{ background: '#f2f2f2', borderRadius: '50px' }}
                                  /&gt;
                                  &lt;Typography variant=&quot;h6&quot; color=&quot;#f2f2f2&quot; ml={1}&gt;
                                      xxxxx xxxxx-1234
                                  &lt;/Typography&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item xs={4} container justifyContent=&quot;center&quot;&gt;
                                  &lt;Timer timeValue={2400} /&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item xs={4} container justifyContent={'right'}&gt;
                                  &lt;Button
                                      variant=&quot;contained&quot;
                                      style={{ background: 'white', color: 'black' }}
                                      size=&quot;small&quot;&gt;
                                      Settings
                                  &lt;/Button&gt;
                                  &lt;Button
                                      variant=&quot;contained&quot;
                                      style={{
                                          background: 'white',
                                          color: 'black',
                                          margin: '0px 10px',
                                      }}
                                      size=&quot;small&quot;&gt;
                                      Hide
                                  &lt;/Button&gt;
                                  &lt;Button
                                      variant=&quot;contained&quot;
                                      style={{ background: 'white', color: 'black' }}
                                      size=&quot;small&quot;&gt;
                                      Help
                                  &lt;/Button&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/Box&gt;
  
              &lt;Box
                  sx={{
                      background: blueGrey[50],
                      height: '100%',
                      width: '100%',
                      position: 'absolute',
                  }}
                  pt={{ xs: 13, sm: 11, md: 10, lg: 11, xl: 11 }}&gt;
                  {questions.map((question, index) =&gt;
                      index === showQuestionCounter ? (
                          &lt;Box
                              key={question.id}
                              px={3}
                              sx={{ background: '#f2f2f2', pb: 4 }}
                              position={{
                                  xs: 'sticky',
                                  sm: 'sticky',
                                  lg: 'initial',
                                  md: 'initial',
                                  xl: 'initial',
                              }}&gt;
                              &lt;Box
                                  style={{ background: '#f7fcff', borderRadius: '4px' }}
                                  py={1}
                                  px={2}&gt;
                                  &lt;Box&gt;
                                      &lt;Typography variant=&quot;h6&quot; component=&quot;h6&quot; ml={1}&gt;
                                          Part {question.id}
                                      &lt;/Typography&gt;
                                      &lt;Typography variant=&quot;subtitle2&quot; component=&quot;div&quot; ml={1} mt={1}&gt;
                                          &lt;NoSsr&gt;
                                              &lt;div
                                                  dangerouslySetInnerHTML={{
                                                      __html: decode(question.questions[0].question, {
                                                          level: 'html5',
                                                      }),
                                                  }}&gt;&lt;/div&gt;
                                          &lt;/NoSsr&gt;
                                      &lt;/Typography&gt;
                                  &lt;/Box&gt;
                              &lt;/Box&gt;
  
                              &lt;Box
                                  style={{
                                      background: '#f7fcff',
                                      borderRadius: '4px',
                                      marginBottom: '75px',
                                  }}
                                  pt={1}
                                  px={3}
                                  mt={{ xs: 2, sm: 2, md: 2, lg: 0, xl: 3 }}&gt;
                                  &lt;Grid container spacing={2}&gt;
                                      &lt;Grid item xs={12} sm={12} lg={6} md={6} xl={6}&gt;
                                          &lt;Box
                                              py={{ lg: 1, md: 1, xl: 1 }}
                                              style={{ height: '50vh' }}&gt;
                                              &lt;Scrollbars universal&gt;
                                                  &lt;Typography
                                                      variant=&quot;body1&quot;
                                                      component=&quot;div&quot;
                                                      style={{ textAlign: 'justify' }}
                                                      mr={2}&gt;
                                                      &lt;NoSsr&gt;
                                                          &lt;div
                                                              dangerouslySetInnerHTML={{
                                                                  __html: decode(question.question_text, {
                                                                      level: 'html5',
                                                                  }),
                                                              }}&gt;&lt;/div&gt;
                                                      &lt;/NoSsr&gt;
                                                  &lt;/Typography&gt;
                                              &lt;/Scrollbars&gt;
                                          &lt;/Box&gt;
                                      &lt;/Grid&gt;
                                      &lt;Grid
                                          item
                                          xs={12}
                                          sm={12}
                                          lg={6}
                                          md={6}
                                          xl={6}
                                          mt={{ md: 4, lg: 4, xl: 4 }}&gt;
                                          &lt;TextField
                                              id={`${question.id}`}
                                              label=&quot;Type your answer here&quot;
                                              multiline
                                              name={`answer_${question.id}`}
                                              rows={12}
                                              variant=&quot;outlined&quot;
                                              fullWidth
                                              helperText={`Words Count: ${wordsCount}`}
                                              onChange={(e) =&gt; {
                                                  setWordsCount(
                                                      e.target.value.trim().split(/\s+/).length
                                                  );
                                              }}
                                          /&gt;
                                      &lt;/Grid&gt;
                                  &lt;/Grid&gt;
                              &lt;/Box&gt;
                          &lt;/Box&gt;
                      ) : null
                  )}
  
                  &lt;Box sx={{ position: 'fixed', width: '100%', left: 0, bottom: 0 }}&gt;
                      &lt;Grid
                          container
                          style={{ background: blueGrey[300], display: 'flex' }}
                          py={2}
                          px={3}&gt;
                          &lt;Grid
                              item
                              xs={3}
                              sm={3}
                              lg={6}
                              md={6}
                              xl={6}
                              container
                              justifyContent={'start'}&gt;
                              &lt;Button
                                  variant=&quot;contained&quot;
                                  style={{ background: 'white', color: 'black' }}
                                  size=&quot;small&quot;&gt;
                                  Save Draft
                              &lt;/Button&gt;
                          &lt;/Grid&gt;
                          &lt;Grid
                              item
                              xs={9}
                              sm={9}
                              lg={6}
                              md={6}
                              xl={6}
                              container
                              justifyContent={'end'}&gt;
                              &lt;Button
                                  variant=&quot;contained&quot;
                                  size=&quot;small&quot;
                                  style={{
                                      background: 'white',
                                      color: 'black',
                                      visibility: show1 ? 'visible' : 'hidden',
                                  }}
                                  endIcon={&lt;ArrowForwardIosIcon /&gt;}
                                  onClick={() =&gt; {
                                      setShow((prev) =&gt; !prev);
                                      setShowQuestionCounter(showQuestionCounter + 1);
                                      setShow1((s) =&gt; !s);
                                  }}&gt;
                                  Next Part
                              &lt;/Button&gt;
                              {show &amp;&amp; (
                                  &lt;&gt;
                                      &lt;Box&gt;
                                          &lt;Button
                                              variant=&quot;contained&quot;
                                              style={{
                                                  background: 'white',
                                                  color: 'black',
                                                  margin: '0 10px',
                                                  visibility: show ? 'visible' : 'hidden',
                                              }}
                                              startIcon={&lt;ArrowBackIosIcon /&gt;}
                                              size=&quot;small&quot;
                                              onClick={() =&gt; {
                                                  setShow1((s) =&gt; !s);
                                                  setShowQuestionCounter(showQuestionCounter - 1);
                                                  setShow((prev) =&gt; !prev);
                                              }}&gt;
                                              previous Part
                                          &lt;/Button&gt;
                                          &lt;Button variant=&quot;contained&quot; color=&quot;success&quot;&gt;
                                              Submit Test
                                          &lt;/Button&gt;
                                      &lt;/Box&gt;
                                  &lt;/&gt;
                              )}
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/Box&gt;
              &lt;/Box&gt;
          &lt;/&gt;
      );
  }
  
  export async function getServerSideProps(context) {
      const { id } = context.query;
      const token = context.req.cookies.token;
  
      if (!token) {
          context.res.writeHead(302, {
              Location: '/',
          });
          context.res.end();
      }
  
      const res = await axios.get(`test/${id}/questions`, {
          headers: {
              Authorization: `Bearer ${token}`,
          },
      });
      if (res.data.success) {
          return {
              props: {
                  questions: res.data.data.questions,
              },
          };
      }
  }
  
  </code></pre>