responsejs - рендерит компонент в HTML внутри функции

Question

Я новичок вactjs, и я пытаюсь использовать тег компонента и отображать его HTML в вызове функции. Однако я не знаю, возможно ли это или рекомендуется. Вот код:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { connect } from 'react-redux'
import Table from '../components/tables/Table'
import CheckBox from '../components/inputs/CheckBox'
import { setMockUserTable } from '../redux/actions/userActions'

class UserDashboard extends Component {
  constructor (props, context) {
    super(props, context)

    this.state = {
      mockUsers: [],
      mockUserTable: []
    }
  }

  render () {
    return (
      <div>
        <b>as</b>
        <Table rows={this.props.mockUserTable} columns={['userId', 'forename', 'surname', 'disable user']} />
      </div>
    )
  }
}

const mapStateToProps = state => {
  state.mockUserTable = [...state.user.mockUsers]

  const checkBoxCtrl = renderToString(<CheckBox />)

  state.mockUserTable.map((item, index) => {
    state.mockUserTable[index].disableUser = checkBoxCtrl
  })

  setMockUserTable(state.mockUserTable)

  return {
    mockUsers: state.user.mockUsers,
    mockUserTable: state.mockUserTable
  }
}

export default connect(mapStateToProps)(UserDashboard)

Я пытаюсь добавить элемент флажка в массив, а затем передать его компоненту универсальной таблицы.

Это мой общий компонент таблицы:

import React from 'react'

const table = (props) => {
  return (
    <div className='table-container'>
      <table className='boxer' width='100%' >
        <tbody>
          <tr>
            {
              props.columns.map((column, index) => {
                return <th key={index} className='table-entry table-title'>{column}</th>
              })
            }
          </tr>
          {
            props.rows.map((row, rowIndex) => {
              return (
                <tr key={rowIndex}>
                  {
                    props.columns.map((column, columnIndex) => {
                      return (
                        <td key={columnIndex}>{row[column]}</td>
                      )
                    })
                  }
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </div>
  )
}

export default table

Как вы можете видеть в TD для флажка, он пуст. Кто-нибудь может предоставить помощь / обратную связь?