How to insert a repeating <td> in react using a function

Question

I have multiple <td> repeating as it is shown in the sample code below. I want to put them in a function so that I can modularize my code. I cannot change anything in my code. Other solutions don't work as they are for something like <td> {this.insertRow} </td>. I want to put whole <td> in a function. If I do it straightaway, then <td> is rendered as a HTML string. Notice how my <td> has dynamic className and doubleClick(). That's why other solutions are not working. Only relevant code is shown here. I have more than 10 <tr> all having similar kind of structure with multiple <td>.

render() {

        return (
            <div>
            <table>
            <tbody>
            <tr>
                <td className="class1">00</td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
            </tr>
            </tbody>
            <tbody>
            <tr>
                <td className="class1">00</td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
            </tr>
            </tbody>
            <tbody>
            <tr>
                <td className="class1">00</td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
                <td className={this.tdClass()} 
                    onDoubleClick={(e) => {this.show(e.target.innerText)}}
                > 
                    {values[index++]}
                </td>
            </tr>
            </tbody>
            <div>
          )
 }

Answer 1

If you want X identical td elements for each value you can map the values object.

values.map((value, i) => (
  <td
    key={i} // or something unique to the value among siblings
    className={this.tdClass()} 
    onDoubleClick={(e) => {this.show(e.target.innerText)}}
  > 
   {value}
  </td>
))

If you need to "chunk" it up, you can pre-chunk it with array::slice, then map it.

array::slice

values.slice(startIndexInclusive, endIndexExclusive)
  .map((value, i) => (
    <td
      key={i} // or something unique to the value among siblings
      className={this.tdClass()} 
      onDoubleClick={(e) => {this.show(e.target.innerText)}}
    > 
     {value}
    </td>
  ))

If this.tdClass is dependent on global index, then you can increment it manually

values.slice(startIndexInclusive, endIndexExclusive)
  .map((value, i) => {
    index++;
    return (
      <td
        key={i}
        className={this.tdClass()} 
        onDoubleClick={(e) => {this.show(e.target.innerText)}}
      > 
       {value}
      </td>
    );
  })

Answer 2

You can create new component for row and set props, like this:

const Row = (props) => {
  return <td className={props.tdClass} 
        onDoubleClick={(e) => {props.show(e.target.innerText)}}> 
        {props.value}
    </td>
}

See full example in playground: https://jscomplete.com/playground/s510805