Как передать динамически созданные реквизиты компоненту?

Я новичок в реакции js. Здесь у меня есть таблица с функциональностью флажка. В ней я создаю динамическое состояние и хочу передать его дочернему компоненту, где находится фактическая таблица.

Мой код похож на

JobList.js

    class JobList extends React.Component { 

    constructor(props) {
    this.state = {
          isCheckd: false
     }

     handleCheckBox = () => {
        this.setState({
          isCheckd: !this.state.isCheckd
        }, () => {
          this.props.jobs.forEach((item) => this.setState({ [item.jdName]: this.state.isCheckd }))
        });
      }

      handleTableCheckboxChange = (e) => {
        this.setState({
          [e.target.name]: e.target.checked
        }, () => {
          const uncheckedItems = this.props.jobs.filter((item) => !this.state[item.jdName])
          this.setState({
            isCheckd: uncheckedItems.length === 0 ? true : false
          });
        });
      }
     return() (
       <table className = "table" id = "actions-table">
                  <tbody>
                    <tr>
                      <td className = "text-right mr-1"><input type = "checkbox" checked = {this.state.isCheckd} onChange = {this.handleCheckBox} />
    </td> </tr></tbody></table>
    }
 <UserJobsTabel
              jobList = {filteredList}
              sortAscending = {this.sortData}
              sortCountAndScoreAscending = {this.sortNumbersAscending}
              addNewRow = {this.addNewRow}
              isRowAddingEditorVisible = {this.props.isRowAddingEditorVisible}
              removeRow = {this.removeRow}
              checked = {this.state.isCheckd}
              handleTableCheckboxChange = {this.handleTableCheckboxChange} />
}

const mapStateToProps = (state) => {
  return {
    jobs: state.UserJobs.jobList,
}
}

Теперь в этом коде я пытаюсь установить и снять флажки.

this.state[item.jdName] so this state is getting generated for the each element in the array.

Теперь я хочу передать это UserJobsTable .

   const UserJobsTable = (props) => {
     return (
    <tbody className = "text-center">
              {props.isRowAddingEditorVisible && <RowAddingEditor removeRow = {props.removeRow} />}
              {props.jobList && props.jobList && props.jobList.length > 0 && props.jobList.map((item, key) => {
                return (
                  <tr key = {key}>
                    <td align = "center"> <input type = "checkbox" name = {props.key} checked = {props[item.jdName]}   onChange = {props.handleTableCheckboxChange} /></td></tr></tbody> ) }




 handleTableCheckboxChange = (e) => {
      this.props.jobs.filter((item) => this.setState(prevState => ({
        dynamicProp: {
          ...prevState.dynamicProp,
          [item.jdName]: e.target.name === [item.jdName] ? true : false
        }
      })
      ))
  }

Я хочу установить его на checkbox . Итак, у меня нет пути, по которому я могу пройти через это состояние. есть ли способ сделать это?