How to rerender a page in React class component based on two tokens with spanids at a time

Question

I have a records data where certain tokens have spanid. I first want to display all the tokens along with label names when the tokens have that and this part will stay or rerendered at all times. Below all the tokens, I want to display two tokens with spanids at a time like first token with spanid with the second one, first with third,... first with n'th token,...... n'th token with (n-1) tokens. So the page will be able to get rerendered n*(n-1) times with the help of previous and next buttons. In the case of the attached data , there are three tokens with spaninds; so below all the tokens, the first token and second token with spanids will be displayed first, on hitting the next button first token with third with spanid will come up and then the second with first token, second with third, third with first and finally, third with second. Hitting the previous button will take back to the previous case. I could do the first part of displaying all the tokens but I need some help with rerendering the page with previous and next buttons where the page can be rerendered n*(n-1) times while considering two tokens with spanids at a time. I have attached the first part of the code where the various tokens are displayed. I appreciate any help with the next part.

import React from 'react';
import './App.css';

const record = [
  { "tid": 1, "token_text": "Canis Familiaris", "spanid": 1, "label": "Name" },
  { "tid": 2, "token_text": "is" },
  { "tid": 3, "token_text": "the" },
  { "tid": 4, "token_text": "scientific name", "spanid": 2, "label": "name type"  },
  { "tid": 5, "token_text": "of" },
  { "tid": 6, "token_text": "dog", "spanid": 3, "label": "species" },
  { "tid": 7, "token_text": "." }
];

class Relation extends React.Component {
const input_tokens = record;
var cntr = 200;

   input_tokens.forEach(tk => {
       const span = tk['spanid'];
       if (!tk['spanid']) {
           tokens_to_render.push(
            <div key= {`id${cntr}`} >
               <div id = {`label${cntr}`} className='no-label' key={tk.tid}>--</div>
               <div key={cntr} id = {`span${cntr}`} index={tk['spanid']} > 
                   {tk['token_text']} 
              </div>
            </div>
          );
          
       } else {
          tokens_to_render.push(
            <div key = {`id${cntr}`} >
              <div id = {`label${cntr}`} className='label' key={tk.tid} >{tk['label']}</div>
              <div
                key={cntr} id = {`span${cntr}`}
                index={tk['spanid']}
              > 
                  {tk['token_text']} 
              </div>
            </div>
          );
       };
       cntr = cntr + 1;
  });
return (
        <div key="outer" > 
          <div key="id" className="control-box">
             {tokens_to_render}
             
      </div> 

    </div>
  )
}
  }
export default Relation;